Losing background image on mobile site ?

I'm 404'ing on this link on a desktop-- url('http://www.carriewilliamsyoga.com/wp-content/uploads/2014/04/optin_blog_bg.gif' I can view the peripherals of the template but no content/image.

I'm a bit unclear on the issue, seems you have(?) been able to view on desktop just not mobile from the above, but wanted to let you know I can't view on desktop.

let me try not over explain myself.

I can't view that particular image that is used as a background for my Gravity Form on my mobile. Right now it's a gif BUT I did have it as a png and it still would not show.

aww I hope I make more sense and don't sound like a DA.

You don't sound like a DA as everyone has errors. I noticed that on that particular link your end quote has become part of the url, that's probably due to your question format. Let me format your code correctly though. This will simplify things and let us see if there are any minor mistakes before we will go any further in depth.

/BLOG OPT IN/ .
blog_optin {
 background:url('')no-repeat;
 background-size:100%;
 display: block; 
padding-top: 20px; 
padding-bottom: 30px; 
padding-left:10px; 
height:250px !important /*<---- Here is the first little miss. */
}

.gform_wrapper .top_label .gfield_label { 
clear: both; 
display: inline-block; 
font-weight: bold; 
line-height: 1.3em; 
margin: 150px 0 4px !important; 
}

.gform_wrapper .gform_footer { 
clear:both; 
display:inline; 
float:right; 
margin:-100px 20px 0 0 !important; 
width: 50px; 
height:53px;
 }

body #gform_wrapper_1 { 
background: url('http://www.carriewilliamsyoga.com/wp-content/uploads/2014/04/optin_blog_bg.gif') no-repeat !important; 
height:100% !important; 
width: 100%!important;  /*<----This also probably should look like the height, with space after the % */
 }

Now, it looks like you have missed the command end line semicolon after the first !iimportant Fix that see what happens.

thanks! Ill try this!

hey there!

Still now luck... I added some some responsive code to see if that would help it didn't. I also tested that particular image other places with in the site and it was visible on mobile just fine. So looks like the ONLY place it's not working { on mobile } is within the form.

below is my new CSS

@media all and (max-width:479px) { 

.blog_optin {
background-image: url('http://www.carriewilliamsyoga.com/wp-content/uploads/2014/04/optin_blog_bg.jpg');
background-repeat:no-repeat;
background-size: 100%;
display: block; 
padding-top: 20px; 
padding-bottom: 30px; 
padding-left:10px; 
height:100% !important;
}

.gform_wrapper .top_label .gfield_label { 
clear: both; 
display: inline-block; 
font-weight: bold; 
line-height: 1.3em; 
margin: 150px 0 4px !important; 
}

.gform_wrapper .gform_footer { 
clear:both; 
display:inline; 
float:right; 
margin:-100px 20px 0 0 !important; 
width: 50px; 
height:53px;
 }
 }


.blog_optin {
background-image: url('http://www.carriewilliamsyoga.com/wp-content/uploads/2014/04/optin_blog_bg.jpg');
background-repeat:no-repeat;
background-size:100%;
display: block; 
padding-top: 20px; 
padding-bottom: 30px; 
padding-left:10px; 
height:250px !important;
}

.gform_wrapper .top_label .gfield_label { 
clear: both; 
display: inline-block; 
font-weight: bold; 
line-height: 1.3em; 
margin: 150px 0 4px !important; 
}

.gform_wrapper .gform_footer { 
clear:both; 
display:inline; 
float:right; 
margin:-100px 20px 0 0 !important; 
width: 50px; 
height:53px;
 }