Question 218621 in CSS Question posted in
Some basic documentation can be found here.

Css – the code on the 2 pages doesnt do the same role can someone pelase help and explain

body {
  margin: 0;
    height: 100%;
    background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 0, 0.5),
    rgba(0, 0, 255, 0.5)
  ), url("img/background.jpg");
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
}

(https://phpout.com/wp-content/uploads/2023/07/3QrE2-jpg.webp)]

the gradient linear repeats in page 2 while it doesnt in page 1 despite the code being the same

Tags:

2

Answers


  1. 0

    You can achieve this using the background-attachment property.

    Try adding background-attachment: fixed in your CSS.

    NOTE: You have to include the background-attachment property AFTER all other background properties.

    Here is a full example:

    body {
  margin: 0;
    height: 100%;
    background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 0, 0.5),
    rgba(0, 0, 255, 0.5)
  ), url("img/background.jpg");
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  background-attachment: fixed;
}

    You can learn more about the Fixed Background Attachment Hack here.

    Login or Signup to reply.
  2. 0

    Change the height to 100vh and set the width: 100%; and also use background instead of background-image as it only takes the background image nothing else. Although, browsers may not always show the error with the wrong code.

    And if you are applying it on 2 pages then add the stylesheet correctly in head section of the page then it will work for sure.

    body {
    margin: 0;
    /* height: 100%; */
    width: 100%;
    height: 100vh;
    background: linear-gradient(to bottom, rgba(255, 255, 0, 0.5), rgba(0, 0, 255, 0.5)), url("https://picsum.photos/1500/1500?random=1");
    background-size: cover;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
}
    <body>    
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search