Code:
#header1{width:100%;}
#header2{
position: absolute;
top: 0px;
left: 0px;
width: 75px;
height: 72px;
background: url("./image.png");
background-repeat: repeat-x;
background-position: -10px -180px;
}
<div id="header1">
<div id="header2">
</div>
</div>
Can anyone provide guidance on how to make the repeating div#header2 span the entire length of div#header1?
P.S.: image.png contains icons. It is a sprite image. For example, the image pack below:
Check out this Fiddle Example !
Make sure to add width:100% to header2 element.
#header1{width:100%;}
#header2{
width:100%;
position: absolute;
top: 0px;
left: 0px;
height: 72px;
background: url("./image.png");
background-repeat: repeat-x;
}
<div id="header1">
<div id="header2">
</div>
</div>
From my understanding, achieving this effect with background-repeat is not possible.
The workaround that comes to mind, albeit somewhat tedious, involves using multiple backgrounds and repeating the same image enough times to cover the entire length:
For example, with 3 images:
.test1 {
position: absolute;
width: 100%;
height: 200px;
}
.test2 {
position: absolute;
width: 100%;
height: 200px;
left: 0px;
background-image: url("http://placekitten.com/200/300"), url("http://placekitten.com/200/300"), url("http://placekitten.com/200/300");
background-repeat: no-repeat;
background-size: 200px 300px;
background-position-x: -100px, 0px, 100px;
}
While I didn't have a sprites image readily available, it's important to note that the kitten face is just a small part of the larger image.
If you need to fill a large div with a small image, you'll have to list the background image quite extensively. At this point, I can't think of any other viable alternative.
Hello everyone, I am working on a page with three textboxes and one listbox. I would like to have functionality where if the user clicks on the first textbox and then selects an item from the list, that selected item should be automatically set as th ...
let element = document.getElementById('test'); console.log(element.scrollHeight); <div style="height: 30px;" id="test"> <p>ffffffffff</p> <p>gggggggggg</p> ...
Recently, some of my questions have not been well-received, which makes me feel a bit disheartened. It's important to remember to be kind when providing feedback. I've noticed that some people downvote without offering constructive criticism, whi ...
Let's get down to the specifics. I've got a frontend website at (don't worry, it's not porn). If you have javascript enabled, the URL becomes [this uses jquery/ajax load]. If you're without javascript, the URL remains as . To ...
I have implemented express-validator in my project to sanitize and escape user input before saving it to my MongoDB database. However, when I try to store a URL in the database after sanitizing it, it gets stored as: https://www.youtube. ...
What is the best way to display a chosen option in PHP? I have set up an HTML menu list with options for "Buy" and "Sell". I need to output 'I want to buy the book' if someone selects "buy", or 'I want to sell the book' if someone pick ...
I am currently in the process of learning web development languages, and I'm attempting to create a dropdown list using JavaScript (I previously tried in CSS without success). I would greatly appreciate it if you could review my code and let me know ...
Utilizing ng-repeat within a table to dynamically generate content brings about the option to interact with and manage the table contents such as edit and delete. A challenge arises when editing and saving a row causes it to disappear. Attempts were made ...
I'm working on creating a user interface for cinema seats in Laravel Blade. The database includes seat rows and columns, and the rows will be the same for two consecutive rows. For example, the first row could have an id of 1 with seat_row:1 and seat_ ...
I am working with a three.js scene that includes numerous animated objects. I am looking to export this animation as an mpg4 video. Here are my questions: What is the best method for exporting a scene to create an mpg4 video? Is it recommended to perfo ...
I am facing the following issue: HTML: <div id="about" class="menu1"> <a href="#">About</a></div> <div id="aboutsub"> <div id="team" class="menu2"> <a href="">Team</a></div> &l ...
After creating my own server, I attempted to implement a login feature to restrict access to its files. Unfortunately, using Javascript for this task proved to be insecure as usernames and passwords could easily be viewed in the source code: <form name ...
My Image Gallery Slider has a feature that uses ScrollIntoView() for its thumbnails, but whenever I scroll up or down the page and a new thumbnail is selected, it brings the entire page back to the location of that thumbnail. Is there a way to turn off t ...
Here are the stylesheets I am currently using: script(src="/js/application.js") script(src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js") script(src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js") link(rel="styl ...
I've been working on a project where I am looking to dynamically add more input fields upon clicking a button. My initial attempt using jQuery.append ran into issues with detecting v-model. Switching gears, I decided to try achieving the same outcom ...
Within the React site, there is a field where users can select a file from their computer and view the file path. To achieve this functionality, I used an HTML input with type="file"... <div className="inline-flex w-full justify-between&q ...
I have 3 main layers on my website: 1) The main view with elements inside (#views in jsbin) - BOTTOM LAYER 2) An overlay (with a white background opacity of .8 #overlay in jsbin) - MIDDLE LAYER 3) A context menu (#contextmenu in jsbin) - TOP LAYER Wh ...
.a { clip-path: polygon(10% 0, 100% 0%, 100% 100%, 10% 100%,10% 60%, 0% 50%, 10% 40%); } .a { position: relative; width: 500px; height: 500px; background:url("https://cdn.pixabay.com/photo/2020/02/16/07/55/thailand-4852830_960_720.jpg"); border-radi ...
When a selenium element is disabled by the ng-show attribute being false, it will have the values Displayed=false and Enabled=true. However, if a selenium element is enabled with the ng-show attribute set to true but is out of the viewport, it will also ha ...
I'm currently working on a project that involves creating border lines between divs to achieve a design similar to the one shown in this design jpeg. However, I've only managed to reach an output jpeg where the merging is not quite right. The C ...