How can I remove a background image on mobile only

[blueprairie]

Hello! I am using Streamline and like how it is switching to mobile formatting, except for how the background image is displaying. How can I use modify the CSS to state display none (or such) for mobile only?

http://polkcityfd2.com.temp.omnis.com/

[nutsandbolts]

At the bottom of your stylesheet, there's a section called Responsive Design. There are three separate media queries - one for a max width of 960px, one for a max width of 600px, and one for a max width of 480px. The first is generally for people on anything smaller than a standard monitor - netbooks, large tablets, or really really old (small) monitors. The second is generally for tablets and the third is for phones. If you want to remove the background image for any or all of those sizes, you can add a CSS rule under each section - it will override the general CSS rules outside of the responsive design part of your stylesheet.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[kilerb]

Hi nutsandbolts. Not sure if you're subscribed to this post, but hopefully you see this 🙂
I have a newer studiopress theme. The 411 one. I want to remove the background completely on mobile platforms because the background just gets covered by the content on these phones/tablets. So I looked at your instructions above. The code that I believe I need to change is below. Little different than the theme in question on this post.
I added `{
background-image:url("gradient2.png");
}`
to each of those areas below, but it still shows the background that was uploaded in the background area of the dashboard. What am I doing wrong? Here's the code that is there now (unchanged without the addition i mentioned above...) If you have some quick advice, it would be appreciated! 🙂

Media Queries
---------------------------------------------------------------------------------------------------- */

@media only screen and (max-width: 1140px) {

	.site-container,
	.site-header {
		width: 60%;
	}
	
}

@media only screen and (max-width: 1023px) {

	.site-container,
	.site-header {
		width: 720px;
	}

	.site-container {
		float: none;
		margin: 0 auto;
	}

	.site-header {
		position: static;
	}

	.site-extras,
	.site-inner {
		margin-top: 40px;
	}

	.click-here,
	.social-icons {
		bottom: auto;
		max-width: 49%;
		position: static;
	}

	.click-here {
		float: right;
	}

	.social-icons {
		float: left;
	}

	.simple-social-icons ul li {
		display: inline-block !important;
		margin-bottom: 0 !important;
	}

}

@media only screen and (max-width: 768px) {

	.site-container {
		padding: 0 5%;
	}

	.title-area {
		padding-bottom: 0;
	}

	.header-image .title-area {
		padding-bottom: 10px;
	}

	.footer-widgets-1,
	.footer-widgets-2,
	.header-image .site-title > a,
	.header-image .title-area,
	.site-container,
	.site-header,
	.site-header .widget-area,
	.title-area {
		width: 100%
	}

	.site-header,
	.site-header .widget-area,
	.title-area {
		text-align: center;
	}

	.site-title {
		margin-bottom: 10px;
	}

	.entry-comments-link,
	.responsive-menu {
		display: none;
	}

	#responsive-menu-icon {
		display: block;
	}

	.entry-title {
		font-size: 30px;
	}

	.five-sixths,
	.four-sixths,
	.one-fourth,
	.one-half,
	.one-sixth,
	.one-third,
	.three-fourths,
	.three-sixths,
	.two-fourths,
	.two-sixths,
	.two-thirds {
		margin: 0;
		width: 100%;
	}

	.footer-widgets .footer-widgets-1 .widget:last-child {
		margin-bottom: 40px;
	}

	.click-here,
	.social-icons {
		float: none;
		max-width: 100%;
	}

}

@media only screen and (max-width: 568px) {

	.site-inner {
		margin-top: 20px;
	}

	.author-box,
	.entry,
	.entry-comments,
	.entry-comments .comment,
	.entry-comments .comment-reply,
	.site-footer,
	.welcome-message {
		margin-bottom: 20px;
	}

[nutsandbolts]

Can you post a link to your site? It's always easier to help if we can see what you see.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[kilerb]

Hi! Thanks! 🙂 It's nikkiglaser.com

[nutsandbolts]

Okay, let me make sure I'm understanding... So on mobile (just phones or tablets as well?) you want to remove the aqua background and the photo and just show the gradient image?

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[kilerb]

Or even just a solid color without her photo. Her photo is right under the content and it looks strange.

[nutsandbolts]

Try this on the first media query size where you want the background image to go away:

.backstretch { display: none; }

That should get rid of it - at least it does in Firebug. 🙂

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[kilerb]

Thanks!!! That worked. I'm not sure if you have an iPhone, but at the top there are 3 little white lines that you click and if you click it, the nav menu shows. Can I just make it show the nav menu without having to click that? Or can I at least change those 3 white lines to the word menu? It's not very noticeable... I'd inspect the element, but it's not there on my computer's browser, only on the phone. :/ Didn't see any image in the images folder that had 3 white lines in it, or i'd just change that in photoshop. Thanks 🙂

[nutsandbolts]

There's a section in the stylesheet labeled Responsive Menu - if you remove that whole section, then remove the two references to .responsive-menu and .responsive-menu-icon from the media queries, it should display the menu normally on mobile.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[kilerb]

Thanks Andrea... Really appreciate it! 🙂

[Author]

Posts