Getting added pic collage to stay within header space
-
I am using CSS to add a banner of a collage of pictures into the header of my blog and am having trouble. I would like the banner to either stay within the header space and conform to the size of the browser window or get to to stretch across the sole screen. Any ideas?
Thanks!
The blog I need help with is: (visible only to logged in users)
-
You’ve added this:
div.logo-row:before { content: url("http://veggiesdontbite.files.wordpress.com/2014/01/top-for-2013.jpg"); }Turn it to:
div.logo-row { background: url("http://veggiesdontbite.files.wordpress.com/2014/01/top-for-2013.jpg") no-repeat scroll 0 0 / 100% auto rgba(0, 0, 0, 0); } header .logo img { margin-top: 220px; } -
Awesome! Thank you! Works great now. So if I ever change the picture, I would just update the URL of the new pic I uploaded right? Does it matter what size collage banner the new pic is or does it have to be a certain size?
-
You’re welcome.
No, it doesn’t matter what width a new pic would be (provided it’s wide enough), because the 100% in the background code means make it cover the available width: that’s what makes the image “conform” the way you wanted.
To make room for it I had to move the logo lower, so if you use an image that has different proportions you’ll need to adjust the margin-top value. -
Oh, another thing: In my version of safari the image doesn’t show, so please try replacing this:
rgba(0, 0, 0, 0)
with this:
transparent -
Great thanks! I just replaced the picture with one a bit larger and more clear. And changed that CSS, thanks for the heads up!
-
You’re welcome, but I”m still not seeing the image in my Safari, so try turning the div.logo-row code to this:
div.logo-row { background: url("http://veggiesdontbite.files.wordpress.com/2014/01/top-recipes-of-2013.jpg") no-repeat scroll 0 0 transparent; } background-size: 100% auto; -
That didn’t work, it put my logo image on top of my banner collage…so weird because I am running Safari and I see it just fine. Any ideas?
-
a) What I suggested was the exact same customization, just expressed in an different way (with the bg size as a separate line). You didn’t notice that my last suggestion was supposed to replace “the div.logo-row code” only, not my whole previous suggestion. In other words, you should have used my last suggestion plus this:
.logo img { margin-top: 220px; }b) If you see it in Safari and I don’t, this means we’re using different versions. I use four browsers, and a couple of them aren’t the latest versions – on purpose.
-
I actually did that. It still has the logo on top of the banner collage pic. Do you want me to do it so you can see?
-
-
-
As expected, I don’t see the “.logo img” code in your CSS. Maybe it wasn’t saved, or maybe there was some typo or mistake while copypasting and the tool I’m using doesn’t recognize it. But you have a different selector that should work. So,
make sure you’ve got this:
div.logo-row { background: url("http://veggiesdontbite.files.wordpress.com/2014/01/top-recipes-of-2013.jpg") no-repeat scroll 0 0 transparent; } background-size: 100% auto;remove this, if you see it:
.logo img { margin-top: 220px; }and turn this:
header .logo img { max-height: 225px; }to this:
header .logo img { margin-top: 225px; max-height: 225px; } -
Ok, I erased it all and just cut and paste what you said to put. It looked good then but the logo was overlapping the banner collage pic a bit so I changed the 225 to 250…is that ok to do? Or is there another way to prevent the overlap?
-
Yes of course it’s ok to change the value.
What’s not ok is that we’re back to square one: the image doesn’t shrink, because you’re missing this line:
background-size: 100% auto;
This started to drive me crazy, so I switched by test blog to the theme you’re using and added this (to find out if something in my suggestion was wrong):div.logo-row { background: url("http://veggiesdontbite.files.wordpress.com/2014/01/top-recipes-of-2013.jpg") no-repeat scroll 0 0 transparent; background-size: 100% auto; } header .logo img { margin-top: 250px; max-height: 250px; }plus all the rest of your custom CSS (to make sure there’s no other mistake). Result? everything worked fine, even in my Safari.
So I simply don’t know what’s going wrong with your CSS editor. -
So I copy and pasted the above, but changed 250 to 200 because it was too low now. This is what I have in my CSS :
div.logo-row {
background: url(“http://veggiesdontbite.files.wordpress.com/2014/01/top-recipes-of-2013.jpg”) no-repeat scroll 0 0 transparent;
background-size: 100% auto;
}
header .logo img {
margin-top: 200px;
max-height: 200px;
}How does it look to you now?
-
Finally working!
When the theme is at its widest, the logo overlaps the other image a little. The margin-top value needs to be at least 215px.
(margin-top and max-height don’t have to be the same value: the one controls the vertical positioning of the logo, the other controls its size.) -
Oh, got it. I changed the top value to 215 and the bottom to 225 which was the original size. Does it work now and not overlap?
Thank you!
-
-
- The topic ‘Getting added pic collage to stay within header space’ is closed to new replies.
WordPress.com Forums 