Hey,
I’m not sure I’m following? Are you wanting to change the background image based on the screen size? What background? can you post a link?
Kadence Themes
Thread Starter
snp_85
(@snp_85)
I mean, when I zoom out the browser windows OR I open the webpage in a pc with higher monitor resolution, I’ve got this:
http://postimg.org/image/4kn9d1ssf/
I’m not sure, but something to do with the information provided here:
https://css-tricks.com/perfect-full-page-background-image/
Tried:
html {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
didn’t work for me
So if your setting the body background add this:
body {
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
}
If it’s a different background post a link or tell me where your setting it.
Kadence Themes
Thread Starter
snp_85
(@snp_85)
Ok. That’s worked for body.
But still not working for head and footer background.
If you post a link I can really know what your trying to do. Would help.
But if you have seperate background for the head and footer you can use the same type of css for those:
.headerclass, .footerclass {
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
}
Kadence Themes
Thread Starter
snp_85
(@snp_85)
Thats just made header and footer bigger (zoomed).
Ok, I’ll post a link soon.
Thread Starter
snp_85
(@snp_85)
link to a webpage (redirected, just for not indexing)
http://icf.bofh.ru/~phr0zen/
As I told you, the previous code didn’t work for footer and header, just zoomed it.
Ok, I’m confused about what you going for. You have a header image, It’s 1400px by 150px
What are you wanting it to be on screens that are say 1800px wide? Are you not wanting it to stretch and fill the whole space?
What are you wanting with your footer background?
Kadence Themes
Thread Starter
snp_85
(@snp_85)
Ok, sorry, I was wrong about the header. Sure needed more px to be full width, and then just center it.
With the footer, dont want like this http://postimg.org/image/z3t4ppdlv/
Need more pix as well?
So when the content isn’t large enough to push the footer all the way to the bottom it would do that. You can use css to absolute position your footer.
@media (min-width: 992px) {
html, body {
height: 100%;
}
html body.wide #wrapper.container {
min-height: 100%;
position: relative;
padding-bottom: 296px !important;
}
#containerfooter {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
}
Kadence Themes
Thread Starter
snp_85
(@snp_85)
Well the idea was to fix(align to) that footer (image) background somewhere like this, to any resolution
http://postimg.org/image/uf51rk3ev/
Can’t really do that easily. You would need to use media queries in css and change the background position for every single screen size. like this:
@media (min-width: 1600px){
.footerclass {background-position-x: 24% !important;}
}
I would consider that your using a responsive theme and that might no be the best way to layout your site.
Kadence Themes
