Archived topic
Background image on homepage only
12 replies · Started by Carol-Ann on October 23, 2018
Hello,
I found a couple other posts that partially fix my problem but looking for further help...
I need a background image for my homepage only. I want the image to cover the full width of the screen, but need it to be responsive for mobile.
I found a post regarding using simple CSS and this coding:
.separate-containers .inside-article,
.one-container .site-content {
background-image: url( 'URL TO IMAGE' );
}
which I tried but the image did not fit. Then I found another post of someone asking what pixel size to use and found this simple CSS response:
body {
background-image: url( URL TO YOUR IMAGE );
background-size: cover;
}
I used the combination of these 2 which works okay for desktop (image still isn't quite the full size I want), but the image does not fit at all on mobile. Any ideas?
Also my website is not live yet so I can't post the URL as it will only lead to a coming soon page.
Thanks in advance!
Hi there,
Background images aren't responsive by nature. One common solution would be to switch out the image with one that's specific for mobile/responsive screen:
@media (max-width: 768px) {
body.home {
background-image: url( URL TO YOUR IMAGE );
}
}Let me know if this helps :)
Do I just add this behind my current CSS? I tried this and didn't have any luck so I imagine I'm doing something wrong.
So your full CSS should be:
body.home {
background-image: url( URL TO YOUR DESKTOP IMAGE );
}
@media (max-width: 768px) {
body.home {
background-image: url( URL TO YOUR MOBILE IMAGE );
}
}If this doesn't work I'll need to see the live site.
Well this removed my picture entirely. Here is the CSS I was using that fixed the image how I wanted on desktop:
.separate-containers .inside-article,
.one-container .site-content {
background-image: url( https://askthenicunurse.com/wp-content/uploads/2018/10/baby-baby-feet-blanket-119604-min-1-min.jpg );
background-size: cover;
}
When I customize my site, if I try to add a background image to the body, nothing appears (unsure why), but when I add the background to the content section, it is right where I want it. Not sure if the CSS has to be for content instead of body?
Can you link me to the site in question?
It will help us get to the solution quicker.
It is askthenicunurse.com but I haven't launched the site yet.
I figured it out:
.separate-containers .inside-article,
.one-container .site-content {
background-image: url( https://askthenicunurse.com/wp-content/uploads/2018/10/baby-baby-feet-blanket-119604-min-1-min.jpg );
background-size: cover;
}
@media (max-width:768px) {
.separate-containers .inside-article,
.one-container .site-content {
background-image: url( https://askthenicunurse.com/wp-content/uploads/2018/10/Untitled-design-2-min.png );
background-size: 100%;
background-attachment: fixed;
}
}Except now while playing around I realized the image is repeating...anything I can add to stop the repeat?
I believe I fixed this as well
.separate-containers .inside-article,
.one-container .site-content {
background-image: url( https://askthenicunurse.com/wp-content/uploads/2018/10/baby-baby-feet-blanket-119604-min-1-min.jpg );
background-size: cover;
}
@media (max-width:768px) {
.separate-containers .inside-article,
.one-container .site-content {
background-image: url( https://askthenicunurse.com/wp-content/uploads/2018/10/Untitled-design-2-min.png );
background-size: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
}
}Hmm you should only need one of the selectors as you can't use separate container and one container at the same time.
Other than that it looks good to me :)
So what exactly would you change? I got the original coding from Tom on this post: https://generatepress.com/forums/topic/how-to-set-a-background-image-for-homepage-only/
Hard to tell without seeing the site.
If it's working then don't worry about :)
