CODEWITHSUNDEEP
htmlcssbackground-image
Maliha Habib
Maliha Habib

Reputation: 1

How can I make my background image responsive? It currently reaches 800px and doesn't adjust properly

I've created a website but I'm having trouble making it responsive. Specifically, the site doesn't adjust properly below 800px. I've tried various methods but haven't had any success.

What is wrong with my code?

Here is the relevant code:

the image is getting cut from the right side

Upvotes: 0

Views: 58

Answers (1)

Faded
Faded

Reputation: 9

The main point is that you are not using css-media-queries for different screen sizes.

For example you want the image to be shown differently on smaller screens, then you should use queries targeting the specific screen sizes, see below an example:

@media (max-width: 800px) {
   .bannerSection {
          font-size: 16px; /* Adjust size for smaller screens */
          background-position: top; /* Ensure image is at top */
          background-size: 200px; /* Ensure image covers the entire section */
  }
}

Here the css inside it will only be applied to the screen sizes below 800, like we made the background-size to be 200px but the background-size for screens larger than 800 will not use this instead they will use background-size: cover;, similarly you can adjust the responsiveness by trying different css classes.

And also you are using some css classes which aren't required likely, like you used 2 height: vh; and auto; classes while you only need the vh one as it sets the height to the viewport (the screen that fits the screen), similarly you are using ::before class which is not needed for simple projects. Its used when you want to have layers or want to make the bg separate than the html so styling it can be done separately. For making width to fit the screen and not enable the scrollbar in browser for x-axis, you should use width: auto; instead. Try the media-query and see it will change the design on smaller screens.

Upvotes: 0

Related Questions