How to make a image background responsive

  • The current image background setting that I have is

    `background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;`

    And for the bg image

    body {
	font-size: 14px;
	font-size: 1rem;
	font-family: Helvetica, Arial, sans-serif;
	text-rendering: optimizeLegibility;
	color: #444;
	background-color: #140B38;
	background-image: url('/wp-content/themes/twentytwelve/images/bg.jpg');
	background-repeat: no-repeat;
}

    And it looks fine on the desktop view, but when it comes to the responsive view it doesn’t seems to look right. It won’t go with the content when you scroll up or down.

    How can I make it responsive?

    All the best,
    -helpmewiththis

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

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    But the Twenty Twelve theme doesn’t show the background image on the <body> element on mobile devices, does it?

    Thread Starter helpmewiththis

    (@helpmewiththis)

    Thanks for the reply.

    I honestly have no idea about this. But when I tried using a mobile phone in viewing the site, it shows a fixed image.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I can’t replicate this issue, sorry.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to make a image background responsive’ is closed to new replies.