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