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

Html – my background image is not shwing up completly in footer

i tried multiple edits but my background image is cutting up in footer code is below plz help. i 

tried qrapping up image in css and using footer as separate class i used &nbsp as i needed space          

in my text of footer

`HTML code for footer section

<!-- Footer Section -->
<footer>
<div class="footer-top-line"></div>
 <p>© 2023&nbsp;&nbsp;&nbsp;&nbsp;&bull;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;All Rights 
                                                                                                                         
 Reserved&nbsp;&nbsp;&nbsp;&nbsp;&bull;
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
Anmol Talwar</p>

</body>
</html>`

 THIS IS HTML CODE WHERE I ALSO ADDED LINE ON TOP OF FOOTER.



 # CSS code for footer section

` .footer {
background-image: url(‘C:/Users/anmol/Desktop/test/aboutme-background.jpg’);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
color: white;
text-align: center;
font-weight: bolder;
padding: 10px 0;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: -1;
}

.footer a {
color: white;
text-decoration: underline;
font-weight: bolder;
}`

.footer-top-line {
 border-top: 1px solid white;
 margin-bottom: 10px;
 }


 PLZ REFER TO PIC I ADDED TO ADDRESS ISSUE I SAID
i tried changing height of footer, then adding bacground image url in footer, it is not working   up and halfway of footer image cuts off if i add anything to body image still extends normal but cuts off in footer     

your text
Tags:

2

Answers


  1. 0

    You should use width and height property along with your code.

    Example:

    width: 1920px;
height: 500px;
    Login or Signup to reply.
  2. 0

    You can fix it by following these steps:

    1. Make sure your image path is correct. Or, if your image is in the same folder as
      your CSS file, you can use background-image: url(‘img-src.jpg’);.

    2. Background Size:
      You are using background-size: cover; which can sometimes cause
      an image to be cropped in order to cover the entire container.

      You might want to
      try different values for background-size to see if that resolves the issue.

      For example, you could use background-size: contain; which will ensure the image
      fits within the container without being cropped, potentially making the whole
      image visible.

    3. change your css in footer.css file as below.

    .footer {
  background-image: url('picture-src.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: white;
  text-align: center;
  font-weight: bolder;
  padding: 50px 0; /* Increase padding to provide more space for the image */
  width: 100%;
  /* position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1; */ /* Try removing these lines */
}

.footer a {
  color: white;
  text-decoration: underline;
  font-weight: bolder;
}

.footer-top-line {
  border-top: 1px solid white;
  margin-bottom: 10px;
}

    Once you try these steps, This should solve the issue.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search