WordPress.org

Support

Support » Themes and Templates » Responsive » [Resolved] different background for mobile devices

[Resolved] different background for mobile devices

  • hi there (again :D)

    i modified the responsive theme a little bit
    so now i have a transparent wrapper on a fullscreen background-image in the body, wich i scale to fit screen by css3

    this is my css for the body:

    body {
    	-moz-font-smoothing: antialiased;
    	-webkit-font-smoothing: antialiased;
    	background: url(images/bg0.jpg) no-repeat center fixed;;
    	-webkit-background-size: cover;
    	-moz-background-size: cover;
    	-o-background-size: cover;
    	background-size: cover;
    	color: #e9e9e9;
    	font-family: Arial, Helvetica, sans-serif;
    	font-size: 14px;
    	font-smoothing: antialiased;
    	line-height: 1.5em;
    	text-rendering: optimizeLegibility;
    }

    for desktop devices it works great, but on mobile devices there is a problem with the scaling, so instead of the scaled background-image i like to have a defined, fixed background-COLOR for mobile devices.

    is there a way to to this?

Viewing 7 replies - 1 through 7 (of 7 total)
  • Moderator Andrew Nevins

    @anevins

    Forum moderator

    Within your Custom CSS option of the dashboard, or Child Theme style.css file, use Media Queries. You can then specify the body styles to be different at a certain browser width.

    @media screen and (max-width: 650px) {
    
        body {
            background-color: blue;
        }
    
    }
    @media screen and (max-width: 480px) {
    
        body {
            background-color: red;
        }
    
    }

    etc

    Thanks,
    Emil

    thanks emil

    but this doesnt work
    i put your code above into the custom stylesheet at theme options
    but on change the browser to very small width it still shows up the background-IMAGE

    the header menu changes his style when changing browser width
    did i something wrong?

    I see, please add your background to body tag of your Theme -vs using WordPress background feature.

    Emil

    i dont know what u want me to do
    i think the background is still in the body tag?

    There’s a background inlined, in the order to have different background in mobile devices please place them in style.css instead 🙂

    It would also be better if CSS is moved to style.css you’re using Child Theme anyways 🙂

    Thanks,
    Emil

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[Resolved] different background for mobile devices’ is closed to new replies.
Skip to toolbar