-
Posts
-
Hello!
I tried to use a Background Image for my areas header, main and socket. I’m not using a footer. At all page where the content is not big enough to fill the whole page the background color is visible. How can i force the areas to stay big enough that this doesn’t happen.
Picture: https://dl.dropboxusercontent.com/u/46363270/Bildschirmfoto%202015-01-05%20um%2000.58.59.png
thx
Hi schoefa2!
Set your background to transparent and then use this CSS.
body { background: url("URL to your image") !important; background-size: cover !important; }Cheers!
Elliottright like this?
/*Body Background*/
.nonfixed_header .header_bg {
opacity: 0;
}
#main, .html_stretched #wrap_all {
background-color: transparent;
}
.socket_color {
background-color: transparent;
}.footer_color {
background-color: transparent;
}body {
body { background: url(“URL to your image”) !important; background-size: cover !important; }there were two mistakes
one “body {” too much and a “,” at “#main”.
BUT it is not working with mobile devices…some parts are shown with the background color? maybe you can check on a mobile phone.
Daniel
on the other hand it is not really working right, cause you can see a overlapping at between the socket background image and the background itself.
Hey!
It looks fine on my end. Take a screenshot and highlight what your seeing.
Best regards,
Elliottthis is how it looks like on mobile device (iphone)
https://dl.dropboxusercontent.com/u/46363270/IMG_8030.PNG
https://dl.dropboxusercontent.com/u/46363270/IMG_8029.PNGthx
Hi!
It looks fine on the Nexus 7. I don’t have an iPhone to check on so I’ll flag this for the rest of our team to take a look.
Regards,
ElliottThis is the code I’m using right now…for beachsummergames.com…something is not working here :-)
.header_color .header_bg{
background-color: transparent;
}
#main .html_stretched #wrap_all {
background-color: transparent;
}
.socket_color {
background-color: transparent;
}
.footer_color {
background-color: transparent;
}
body { background: url(https://dl.dropboxusercontent.com/u/46363270/background.jpg) !important;
background-size: cover !important; }Thanks! Update didn’t change much!
Still using this code:
.header_color .header_bg{
background-color: transparent;
}
#main .html_stretched #wrap_all {
background-color: transparent;
}
.socket_color {
background-color: transparent;
}
.footer_color {
background-color: transparent;
}
body { background: url(https://dl.dropboxusercontent.com/u/46363270/background.jpg) !important;
background-size: cover !important; }on pages like this: http://www.beachsummergames.com/14-2/ it looks right
if you open the main page it looks like this: https://dl.dropboxusercontent.com/u/46363270/problem.jpgThanks for help!
- You must be logged in to reply to this topic.