OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Background Image repeating when resizing windows width

  • Thread starter Thread starter mowen10
  • Start date Start date
M

mowen10

Guest
i am trying to create a page that has a background image in between a header and footer will work on any screen size.

I have managed to create the page and it works fine on desktop screen. The problem i have is when I resize to mobile size screen then the background is repeated.

Here is my code:

Code:
div {
    width: 100%;
    height: 5886px;
    background-image: url('services-yellow.jpg');
    background-size: 100% auto;
    background-repeat: none;
    border: none;
}

Has the height attribute set at a specific height, but i am not sure how i can change this so that it works on all screen sizes.

The site can be viewed at: http://s116169771.websitehome.co.uk/testsite/

If somebody could please advise on how i could fix this, would really appreciate it.

Thanks in advance.
<p>i am trying to create a page that has a background image in between a <code>header</code> and <code>footer</code> will work on any screen size.</p>

<p>I have managed to create the page and it works fine on desktop screen. The problem i have is when I resize to <code>mobile size screen</code> then the background is repeated.</p>

<p>Here is my code:</p>

<pre><code>div {
width: 100%;
height: 5886px;
background-image: url('services-yellow.jpg');
background-size: 100% auto;
background-repeat: none;
border: none;
}
</code></pre>

<p>Has the height attribute set at a specific height, but i am not sure how i can change this so that it works on all screen sizes.</p>

<p>The site can be viewed at: <a href="http://s116169771.websitehome.co.uk/testsite/" rel="nofollow">http://s116169771.websitehome.co.uk/testsite/</a></p>

<p>If somebody could please advise on how i could fix this, would really appreciate it.</p>

<p>Thanks in advance.</p>
Continue reading...
 

Latest posts

Top