Bortas
I'm trying to add a separator image after a heading, that part I was successful with, but I want the size to automatically scale up/down as the page is resized.
@h2:after{
content: url('https://db4sgowjqfwig.cloudfront.net/campaigns/67984/assets/326526/divider.png');
clear: right;
display: block;
} /* Swirly divider after H2 header */@
Try making your browser smaller; the divider stays the same size, and pushed other content out of the way. "An example":https://morwindl.obsidianportal.com/wikis/main-page Additionally, if you are just on my "front page":http://morwindl.obsidianportal.com and the stream on the right.... horrible!
Any ideas? Thanks,
-bort
"Morwindl":http://morwindl.obsidianportal.com
Comments
@
h2:after{
background-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/67984/assets/326526/divider.png');
background-repeat:no-repeat;
background-size:100%;
clear: right;
display: block;
} /* Swirly divider after H2 header */
@
You might need to set the height and width too...
That was what I had originally tried, and it doesn't directly work (there is no content in the :after, therefor, nothing is displayed). I believe I could force a certain height, but.... that sort of defeats the purpose of scaling. (edit): no, I can force the height, but still not displaying the image.
Thanks for trying!
-bort
"Morwindl":http://morwindl.obsidianportal.com
Campaign of the Year - 2018
Then try the background thing above.
:)
.campaign-public-layout #sidebar .section-header h2 {
}
That would make it so the content is only kicked in after the h2 on the sidebar. As for forcing the height and still having a responsive image, there is nothing wrong with that. The responsiveness of content comes at the width rather than the height typically (there are some exceptions to this, but they are uncommon I feel).
--
Alex
"Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/
Currently using:
@h2:after{
background-image: url('https://db4sgowjqfwig.cloudfront.net/campaigns/67984/assets/326526/divider.png');
background-repeat:no-repeat;
background-size:100%;
clear: right;
display: block;
content: "";
/*
content: url('https://db4sgowjqfwig.cloudfront.net/campaigns/67984/assets/326526/divider.png');
*/
} /* Swirly divider after H2 header */@
And it displays nothing.
-bort
Campaign of the Year - 2018
h2:after {
background-size:100%;
background-repeat:no-repeat;
background-width:100%;
height:40px;
content:"";
background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/67984/assets/326526/divider.png);
clear: right;
display: block;
}
--
Alex
"Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/
-bort
"Morwindl":http://morwindl.obsidianportal.com
Campaign of the Year - 2018
--
Alex
"Dragon Age: Requiem":https://dragon-age-requiem.obsidianportal.com/
h2 {
font-weight:bold;
color:#6d0808 !important;
font-family:Gabriela, serif;
text-align:center;
font-size:200%;
border-bottom:none !important;
height:80px;
} /* Bold Header, most commonly used on wiki/character pages */
h2:after {
background-size:80%;
background-repeat:no-repeat;
background-width:100%;
background-position: center bottom;
height:40px;
content:"";
background-image: url(https://db4sgowjqfwig.cloudfront.net/campaigns/67984/assets/326526/divider.png);
display: block;
} /* Swirly divider after H2 header, most commonly used on wiki/character pages */
I tried a max-width:450px; but it tosses it to the left instead of centered, and I decided I was done playing with it ;-)
-bort
"Morwindl":http://morwindl.obsidianportal.com
Campaign of the Year - 2018