One place for hosting & domains

      Background

      How to Change a CSS Background Image’s Opacity


      While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or
      edited it to ensure you have an error-free learning experience. It’s on our list, and we’re working on it!
      You can help us out by using the “report an issue” button at the bottom of the tutorial.

      With CSS and CSS3 you can do a lot of things, but setting an opacity on a CSS background is not one of them. However, if you get creative, there are a ton of creative work-arounds you to make it seem like you’re changing the CSS background image’s opacity. Both of the following methods have excellent browser support down to Internet Explorer 8.

      Method 1: Use absolute positioning and an image

      This method is exactly like it sounds. You simply use absolute positioning on an a normal img tag and make it seem like you used the CSS background-image property. All you have to do is put the image inside of a position: relative; container. Here’s what the HTML markup generally looks like:

      <div class="demo_wrap">
        <h1>Hello World!</h1>
        <img src="https://www.xpresservers.com/wp-content/uploads/2020/09/How-to-Change-a-CSS-Background-Images-Opacity.png">
      </div>
      

      And here’s what your CSS will look like:

      .demo_wrap {
          position: relative;
          overflow: hidden;
          padding: 16px;
          border: 1px dashed green;
      }
      .demo_wrap h1 {
          padding: 100px;
          position: relative;
          z-index: 2;
      }
      .demo_wrap img {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: auto;
          opacity: 0.6;
      }
      

      The trick here is to absolutely position the img and stretch it so it fills the entire parent container. And to relatively position everything else so that you can set a z-index that pulls it above the img.

      Here’s a live demo:

      Method 2: Using CSS Pseudo-Elements

      This method is seems simple once you see it, and is definitely my preferred method of doing this. Using CSS pseudo-elements of either :before or :after, you a div with a background image and set an opacity on it. Here’s what your HTML markup would roughly look like:

      <div class="demo_wrap">
        <h1>Hello World!</h1>
      </div>
      

      And here’s what the CSS looks like:

         .demo_wrap {
          position: relative;
          background: #5C97FF;
          overflow: hidden;
      }
      .demo_wrap h1 {
          padding: 50px;
          position: relative;
          z-index: 2;
      }
      /* You could use :after - it doesn't really matter */
      .demo_wrap:before {
          content: ' ';
          display: block;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
          opacity: 0.6;
          background-image: url('https://www.xpresservers.com/wp-content/uploads/2020/09/How-to-Change-a-CSS-Background-Images-Opacity.png');
          background-repeat: no-repeat;
          background-position: 50% 0;
          background-size: cover;
      }
      

      Here again we must move the z-index of content (in this cas the <h1>) above the background pseudoelement, and we must explicitly define the position: absolute; and z-index: 1 on the :before pseudoelement.

      The rest of the attributes on the pseudoelement exist to position it to overlap 100% of the parent, and also make use of a clever new CSS property: background-size: cover which sizes the background to cover the element without changing proportions.
      Here’s a nice little demo of this method:



      Source link

      How To Add a Background Image to the Top Section of Your Webpage With HTML



      Part of the Series:
      How To Build a Website With HTML

      This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the demonstration website.

      At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

      In this tutorial we’ll learn how to use a <div> container to structure the top section of the webpage. We will use the style attribute to specify the height of our <div> container, apply a background image, and specify that the background image should cover the entire area of the <div> container.

      Before we get started, we’ll need a background image. You may download and use our demonstration site’s background image for the purpose of the tutorial, or you can choose a new image. (For a refresher on how to add images to webpages using HTML, please visit our tutorial HTML Images from earlier in this tutorial series).

      Once you’ve chosen your background image, save the image in your images folder as background-image.jpg.

      Next, paste the highlighted code snippet into your index.html file below the opening <body> tag and above the closing </body>:

      . . .
      <body>
      <!--First section-->
      <div style="background-image: url('Image_Location'); background-size: cover;; height:540px;
      </div>
      </body>
      </html>
      

      Make sure to switch the text that says Image_Location with the file path of your image and don’t forget to add the closing </div> tag.

      Note that we have added the comment <!--First section--> to help organize our HTML code. A comment is a piece of code that is ignored by the browser. Comments are used to help explain or organize code to developers. They are created with the opening tag <!-- and the closing tag -->.

      Save the file and reload it in the browser. You should receive something like this:

      Background image in top section

      Alternately, you can use a background color instead of a background image. To use a background color, replace the <div> element code snippet you just created with the following highlighted <div> element code snippet like this:

      ...
      <body>
       <div style="background-color: #f4bc01; height:540px;"> 
      </div>
      </body>
      </html>
      

      Save the file and reload it in the browser to check your results. The background image should now be replaced with a container that is the same size but has a solid yellow color.

      If you compare the <div> container on your site with the same <div> container on the demonstration site, you may notice that your webpage’s <div> container is surrounded by a small margin of white space. This margin is due to the fact that all HTML pages are automatically set to have a small margin by default.

      To remove this margin, we need to add a style attribute to the opening <body> tag that sets the margin of the <body> element of the HTML page to 0 pixels. Locate the opening <body> in your index.html file and modify it with the highlighted code:

      <body style=“margin:0;”>

      Save and reload the file in your browser. There should now be no white margin surrounding the top <div> container.

      You should now know how to add a <div> container with a background image to structure the top section of a webpage.



      Source link