Unable to set CSS image as background

Currently, I am in the process of developing a website using HTML 5, CSS, and JavaScript. However, I am encountering an issue with image manipulation on the site. I am attempting to make the image the background but every method I try seems to be lacking a div or overlay.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" type="text/css" href="attributes.css">
</head>
<body>
<!-- page bar header navigation tabs -->
<div class="head_bg">
  <div class="wrap">
    <div class="logo">
        <a href="index.html">
            <img src="file:///C:/Develop/CodeSamples/manage-landing-page-master/images/logo.svg"> 
             </img>
            <div class="banner" id="move-top">
                <img id="circular_clip" src="file:///C:/Develop/CodeSamples/manage-landing-page-master/images/bg-tablet-pattern.svg"></img>
            </div>
        </a>
    </div>
   </div>
</div>

CSS

div.banner {
   width: 780px;
   margin-top: 0px;
   margin-left: 800px;
} 
.head_bg {
    margin-top: 25px;   
}
#circular_clip {
  position: absolute;
  clip: rect(0, 100px, 200px, 0);
}
.banner {
   background-position: -20px 0px;
   /* clip:rect(500px,50px,500px,0px); */
} 
.menu-left {
    text-align: right;
}

.logo {
    margin-top: 15px;
    padding: 4px 4px 4px 4px;
}
.menu_head_banner a {
   active: true;
}

.wrap {
   margin: 0px auto;
 }

.header_row_tabs a li ul {
  margin-top: 15px;
  float: center;
  font-size: medium;
  font-family: 'Lato', sans-serif;
  padding: 33px 15px;
  display: block;
  text-align:center;
  align-items: right;   
}

.header_top_background li {
   font-size: large;
   padding: 0.45em 1em 0.55em 1em;
   background: #EB6841;
   float: right;
   border-bottom: 5px solid #BA3A14;
   border-right: 5px solid #CD542F; 
 }

I would like to set the bg-tablet-pattern.svg as the background using .banner{ background-image:url();} along with background:url() and apply styling in the HTML document, hoping that by incorporating these features in the CSS, the intended image will appear in the background. While I can see the image correctly, my objective is to have it span across the page from right to left, covering the corner of the page. This explains the reason for the positioning, although the image does not start at the top of the page as desired. Despite being able to implement the background-image feature through CSS, when trying to relocate elements within different parts of the page, the image does not remain stationary. Is there a way to lock the background image in place?

Update

I have managed to position the image, yet there are still some responsive elements that need addressing. Similar queries have been raised on StackOverflow regarding code compatibility, and while this particular issue has been resolved, remaining concerns exist regarding the responsiveness of the design. CSS Image positioning

Answer №1

Great! I have a helpful solution.

To enhance your website design, you can include the following code snippet in your CSS file. By applying this code, every element with the body tag will display the specified image as the background. Make sure to enclose all of your website content within body tags for optimal coverage.

body {
  background-image: url("Image.jpg");
}

Below is an example HTML code snippet for your reference:

<!DOCTYPE html>
<html lang="en">
<body>
  <p>This is a Test
    <div>You should see a Background Image</div>
  </p>
</body>
</html>

Please let me know if this solution works for you and feel free to ask if you need further assistance.

For additional information, you can visit this link: https://www.w3schools.com/css/css_background_image.asp

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Problem with icon color not being applied to lightning-tab component in LWC

.html <lightning-tabset variant="vertical" > <lightning-tab class="class1" icon-name="utility:adduser" label="demo label1"> demo label1 </lightning-tab> <lightning-tab class=" ...

Exploring the origins of CSS through patch design

Want to learn how to create a background like this using CSS? Check out this link for inspiration! ...

What is the best way to design a large grid layout using HTML5?

I am aiming to construct a 6 by x grid where the columns retain uniform size based on the width of the outer container (i.e. body). The height should be consistent within each row and adjust according to the content in each cell. Below is my current progr ...

Error: Authorization required to access server-side resource [POST http://localhost:3000/serverSide] - Status

I'm having an issue with sending a username and password from an HTML file to a Javascript file that queries an employee table for authentication. The problem arises when the username and password are set to undefined in my serverSide.js file, prevent ...

How can links in HTML be eliminated if a certain condition is not fulfilled?

If a specific condition is met, I would like to eliminate the "a href" tag. For example, when the term "None" is present, I prefer it not to be linked. html: {% for item in responses %} <tr> <td ...

Adjust the dimensions of the bootstrap dropdown to match the dimensions of its textbox

The second textbox features a bootstrap dropdown with extensive content that is overflowing and extending to other textboxes below it. I am looking for a way to resize the dropdown to fit the size of its corresponding textbox. UPDATE: I want the dropdown ...

Tips for updating information when a button is chosen

Hello everyone, I need some help with a form that has three select buttons. The button labeled "Distribute" is already selected when the page loads, and it contains information about full name, password, and location. How can I use JavaScript to create a c ...

How to create a full-page background image using Bootstrap?

Take a look at this example: In the provided example, there is a background landing page that expands to fit the width of the viewport, remains responsive, and does not take up the full width of the page. How can you utilize bootstrap to manually code an ...

What is the best way to create underlined text that is either left-aligned or centered?

I am looking to replicate this specific style of decoration in a full width container. My goal is to have it aligned to the left of the text and restricted to a maximum width. https://i.stack.imgur.com/H8DXT.png ...

The menu field remains open even after clicking on the menu

I have encountered an issue with my code. Here is a DEMO that I created on jsfiddle.net Currently, when you click on the red div, the menu opens. However, if you click on the menu items, the menu area does not close. What do I need to do in order to clo ...

How to retrieve the content/value from a textfield and checkbox using HTML

I'm encountering an issue with my HTML code where I am unable to extract data from the HTML file to TS. My goal is to store all the information and send it to my database. Here is a snippet of the HTML: <h3>Part 1 : General Information</h3 ...

Utilize JavaScript and HTML to show error messages based on whether the user is deactivated or if the input is invalid

I need to show different error messages under the 'Email Address' input if the user is disabled and under the 'Password' input if the user is invalid. In my debugging process, I discovered that a user being disabled results in a "Status ...

Resetting CSS animations using animation-delay

My aim is to animate a series of images on my landing page using Next.js and SCSS. The issue arises when I try to add dynamic animations that reset after each cycle. The delay in the animation causes the reset to also be delayed, which disrupts the flow. I ...

Trouble aligning Material UI data-table columns (table head) to center in React

I have a data table where I declare rows and columns as simple variables, making it difficult to style them using 'style={{textAlign: center}}'. I tried adding a CSS file, but it did not work with the Material UI table. I am unsure of how to proc ...

Creating a selection area with CSS that appears transparent is a straightforward process

I'm currently exploring ways to implement a UI effect on a webpage that involves highlighting a specific area while covering the rest of the page with a semi-transparent black overlay, all using CSS only. What is the most common approach to achieving ...

What is the reason that the 'mouseenter' event only applies to the initial element in each round of iteration within a spacebar loop?

My goal is to create an off-canvas menu within a template component. I found inspiration from this helpful article. The setup I have is quite common: A container tab where I loop through an items collection An item component that contains the off-canvas ...

Jquery scroll animation not reaching the intended position when scrolling upwards

While developing a new feature for my music player, I encountered an issue with centering the track/div upon clicking in the scrollable parent div. Sometimes it doesn't scroll to the center as intended and instead scrolls erratically to the top of the ...

Simple steps to dynamically alter CSS styles according to the current URL

I am working on a website where I want users to be able to change the background image and other CSS elements. Currently, my approach is to have multiple HTML pages that users can switch between using a dropdown menu and reload the page. For example: hre ...

The ElementNotInteractableException error occurred because the element cannot be interacted with as it is currently not visible, therefore it cannot be manipulated using robot framework

I am encountering an issue with a dropdown menu. When running the script, I receive the error message "ElementNotInteractableException: Message: element not interactable: Element is not currently visible and may not be manipulated." Upon inspecting the HT ...

How to align a div in the center of a cell with Bootstrap

I am currently working with Bootstrap 3 and I have a specific requirement to center a div within a cell in the container row. Most resources I found only mention how to center a div within the entire container, which is not what I am looking for. My goal i ...