responsive background, doenst show any background

responsive background, doenst show any background - css

i need some help with the css properties of the responsive background, i add;
/* =Global
----------------------------------------------- */
homeContent {
height: 100%;
width: 100%;
background-image: url(http://mariovital.com/zaask/wpcontent/uploads/2014/05/fundo.png);
background-repeat: no-repeat;
position: relative;
margin: 0 auto;
}
#mainBG {
background-image: url(http://mariovital.com/zaask/wp-content/uploads/2014/05/fundo.png);
background-repeat: no-repeat;
no-repeat scroll;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;*/
}
also have the responsive css for the media
#media only screen and (max-width: 1024px) and (orientation:landscape) {
#mainBG {
background: url(http://mariovital.com/zaask/wp-content/uploads/2014/05/fundo.png) 50% 0 no-repeat scroll !important;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
}
#media only screen and (min-width: 768px) and (max-width: 991px) {
#mainBG {
background: url(http://mariovital.com/zaask/wp-content/uploads/2014/05/fundo.png) 50% 80% no-repeat scroll !important;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
}
#media only screen and (min-width: 0px) and (max-width: 767px) {
#mainBG {
background: url(blank.png) 75% 80% no-repeat scroll !important;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
}
i believe that everything its ok here... but is doesnt show on my web page what i doing wrong ?
http:/mariovital.com/zaask
any help will be apreciated !
thz in advanced

Your #mainBG has no dimensions. Try:
#mainBG {
position: absolute;
width: 100%;
height: 100%;
}

Related

How to set background image with full width and responsive

Im trying to set a background image and set this to be full witdh but im only getting to see it centered.
.wrapper-hero {
width: 100%;
height: auto;
max-width: 1920px;
}
.wrapper-hero .hero-image {
background: url('#{baseDir}images/hero-image.png') no-repeat top center;
background-size: contain;
background-repeat: no-repeat;
display: block;
background-size: cover;
height: 800px;
width: 1200px;
}
<div class="wrapper-hero">
<div class="hero-image"></div>
</div>
Any ideas? And the image is not responsive at all...

You're using background-size multiple times. Try this code.
.hero-image {
background: url('#{baseDir}images/hero-image.png') no-repeat center center fixed;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Background image not fitting the whole width of the browser?

This is my code:
#content{
background-image: url('../images/hero.jpg');
background-size: cover;
background-repeat: no-repeat;
width:100%;
height: 550px;
}
why does it not fit the screen with 100% width and with cover?

You set width 100% on #content, not on background. Try this:
#content {
background: url('/images/bg.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Pre-define CSS background image center center position and cover background size

I am struggling to shorten down my CSS code for background image position (center center) and background size (cover).
Whenever I use the following code, it works fine, obviously:
HTML:
<div class="banner-divider" id="banner-divider-welcome"></div>
<div class="banner-divider" id="banner-divider-second"></div>
CSS:
.banner-divider{
width: 100%;
height:600px;
}
#banner-divider-welcome{
background: url(/images/welcome.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#banner-divider-second{
background: url(/images/second.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I would like to shorten/delete multiple CSS repetitions of the center center and cover properties (as I have multiple banner ID's but with repeating background settings), however the following code does not center center and cover the images correctly:
HTML:
<div class="banner-divider" id="banner-divider-welcome"></div>
<div class="banner-divider" id="banner-divider-second"></div>
CSS:
.banner-divider{
width: 100%;
height:600px;
background: #fff;
background-image: none;
background-repeat: no-repeat
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#banner-divider-welcome{
background: url(/images/welcome.jpg);
}
#banner-divider-second{
background: url(/images/second.jpg);
}
What am I doing wrong?

You're overwriting the entire background property. Set background-image instead.
.banner-divider{
width: 100%;
height:600px;
background: #fff;
background-image: none;
background-repeat: no-repeat; /* <- missing semi-colon */
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#banner-divider-welcome{
background-image: url(/images/welcome.jpg); /* <- here */
}
#banner-divider-second{
background-image: url(/images/second.jpg); /* <- and here */
}
.banner-divider{
width: 100%;
height:600px;
background: #fff;
background-image: none;
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#banner-divider-welcome{
background-image: url(https://placeimg.com/100/100/any);
}
#banner-divider-second{
background-image: url(https://placeimg.com/150/150/any);
}
<div class="banner-divider" id="banner-divider-welcome"></div>
<div class="banner-divider" id="banner-divider-second"></div>

you need to use background-image instead of using background property.
.banner-divider{
width: 100%;
height:600px;
background: #fff;
background-image: none;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#banner-divider-welcome{
background-image: url(/images/welcome.jpg);
}
#banner-divider-second{
background-image: url(/images/second.jpg);
}

Combining multiple CSS elements

What would be the best way to combine these CSS elements?
As my web page grows I'm quite concerned about maintenance. There is not much difference between the below, apart from the bg image used, so I was wondering if there could be a way to make the code more maintainable.
#section3 {
background: url(../img/img2.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
z-index: 1;
}
#media only screen and (min-width: 0px) and (max-width: 768px) {
#section3 {
height: 30em;
}
}
#media only screen and (min-width: 769px) {
#section3 {
height: 50em;
}
}
#section5 {
background: url(../img/img3.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
z-index: 1;
}
#media only screen and (min-width: 0px) and (max-width: 768px) {
#section5 {
height: 30em;
}
}
#media only screen and (min-width: 769px) {
#section5 {
height: 50em;
}
}
#section7 {
background: url(../img/img4.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
z-index: 1;
}
#media only screen and (min-width: 0px) and (max-width: 768px) {
#section7 {
height: 30em;
}
}
#media only screen and (min-width: 769px) {
#section7 {
height: 50em;
}
}

I would suggest something like this Fiddle.
#section3 {
background: url(../img/img2.jpg) no-repeat center center;
}
#section5 {
background: url(../img/img3.jpg) no-repeat center center;
}
#section7 {
background: url(../img/img4.jpg) no-repeat center center;
}
#section7, #section5, #section3 {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
z-index: 1;
}
#media only screen and (min-width: 0px) and (max-width: 768px) {
#section7, #section5, #section3 {
height: 30em;
}
}
#media only screen and (min-width: 769px) {
#section7, #section5, #section3 {
height: 50em;
}
}
Perhaps you have also a look at LESS or SASS.

CSS background image to fit height, width should auto-scale in proportion

I want background image fit with the height of the div, there's a way to do that? background-size:cover; fit only with the width and height autoscale (I need the opposite effect).
Thanks.

I know this is an old answer but for others searching for this; in your CSS try:
background-size: auto 100%;

background-size: contain;
suits me

try
.something {
background: url(images/bg.jpg) no-repeat center center fixed;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: -100;
}

body.bg {
background-size: cover;
background-repeat: no-repeat;
min-height: 100vh;
background: white url(../images/bg-404.jpg) center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
Try This
body.bg {
background-size: cover;
background-repeat: no-repeat;
min-height: 100vh;
background: white url(http://lorempixel.com/output/city-q-c-1920-1080-7.jpg) center center no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
<body class="bg">
</body>

I just had the same issue and this helped me:
html {
height: auto;
min-height: 100%;
background-size:cover;
}

This style helped me to fully fit image by height:
body {
background-image: url("/static/img/grass.jpg");
background-repeat:no-repeat;
background-size: cover;
min-height: 100vh;
}