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


    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;



    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.


    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 🙂


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