WordPress.org

Ready to get started?Download WordPress

Forums

Responsive
[resolved] different background for mobile devices (8 posts)

  1. Tr0tL
    Member
    Posted 1 year ago #

    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?

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    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.

  3. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

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

    etc

    Thanks,
    Emil

  4. Tr0tL
    Member
    Posted 1 year ago #

    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?

  5. Tr0tL
    Member
    Posted 1 year ago #

  6. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

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

    Emil

  7. Tr0tL
    Member
    Posted 1 year ago #

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

  8. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    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

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.