Html Question posted in
Some basic documentation can be found here.

Html – How to remove a background image body in media

So, I have a image in the background of my site. When my site is open in media screen I want to the image disappear in the media screen.
I try to do this:

body {
  font-family: "Roboto", sans-serif;
  color: #000000;
  background-color: #f2f2f2;
  background-image: url("https://picsum.photos/200/300?grayscale");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 110%;
  background-attachment: fixed;
}

@media only screen and (max-width: 200px) {
  body {
    background-color: lightblue;
    background-image: none;
  }
}

but its not working.
The website is: www.goodplastic.pt

Tags:

2

Answers


  1. 0

    Your CSS code looks mostly correct. However, there might be a couple of issues causing the background image not to disappear on smaller screens:

    Media Query Condition: The condition max-width: 200px might be too narrow for typical screen sizes. It would apply only when the viewport width is 200 pixels or less. Consider using a wider width, such as max-width: 600px, to target smaller screens more effectively.

    @media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
    background-image: none;
  }
}
    Login or Signup to reply.
  2. 0

    It looks like there might be a misunderstanding regarding the use of max-width: 200px in your media query. Typically, max-width: 200px would apply to devices or screens that are less than 200 pixels wide, which is quite narrow and uncommon for most screens.

    If you’re trying to target smaller screens, you might consider using a higher value for max-width, such as max-width: 768px for tablets or max-width: 480px for mobile phones, depending on your design and target devices.

    Here’s an updated version of your CSS with a more common max-width value and its working for me:

    body {
  font-family: "Roboto", sans-serif;
  color: #000000;
  background-color: #f2f2f2;
  background-image: url("../images/Logo.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 110%;
  background-attachment: fixed;
}

@media only screen and (max-width: 768px) {
  body {
    background-color: lightblue;
    background-image: none;
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search