HTML and CSS3 - Pair of Background Divs

I've been encountering some issues with my website recently. I'm attempting to stack two divs on top of each other to create a jagged background effect. Here's an example: https://docs.google.com/drawings/d/1IdqWKdkbS-xxLrvzLF8bh5k_B6iIzmlmNJdKi8CgZSc/edit?usp=sharing. However, I haven't been able to make it work as intended. Currently, only one of the images is being displayed at a time. Here is the code I am using:

<div style="background-image:url('http://www.mediadude.co.uk/wp-content/themes/wpbootstrap/images/WashedWallTexture2.jpg'); background-repeat:repeat-x; clear:both;">
<p><!--EmptySpace--></p> </div>
<div style="background-image:url('http://www.mediadude.co.uk/wp-content/themes/wpbootstrap/images/WashedWallTexture1.jpg'); background-repeat:repeat; clear:both">    
<!--content here-->
</div>

Thank you for your assistance.

htmlimagecssbackground

Answer №1

Your code is working flawlessly as anticipated. By default, DIVs do not overlap each other. They are set to "display: block," which keeps them within the document flow. As a result, the second div will be positioned below the first div and the initial paragraph. Simply adding a background image will not remove it from the flow; you must adjust the positioning. Furthermore, it is advisable to avoid using inline styles; every time you do so, a kitten meets its demise.

Here's the suggested approach:

HTML:

<div class="top_bg"></div>
<!--content goes here-->

CSS:

.body {
    background-image: url('http://www.mediadude.co.uk/wp-content/themes/wpbootstrap/images/WashedWallTexture1.jpg'); 
}

.top_bg {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 14px;
    background: #fff url('http://www.mediadude.co.uk/wp-content/themes/wpbootstrap/images/WashedWallTexture2.jpg') repeat-x;
}

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

The Challenge of Referencing Javascript Files (including jQuery)

Previously, I had the following code snippet: <head> <script src="/Scripts/jquery-1.3.2.min.js" type="text/javascript"></script> <script type="text/javascript"> var optPrompt = "- Select One -"; var subCats ...

javascriptjqueryhtmlfilereference

Prevent improper text wrapping of certain words in RTL languages like Farsi and Arabic

In languages like Farsi and Arabic, as well as other RTL languages, letters are connected to each other (e.g. سیب), but not always (e.g. می شود). This can sometimes cause issues with the flow of text when half a word wraps over to the next line due ...

csshtmlright-to-left

html The "download" attribute causing a new tab to open rather than initiating a

I have a website built with Angular 4, where users can download images from an Amazon S3 bucket. However, I encountered an issue wherein instead of downloading the image, it opens in a new tab. I've tested this problem on different browsers such as Fi ...

htmlangularimagedownload

PHP Warning: Attempting to access a key that does not exist in the array

Upon checking the error_log, I came across this error message. Searching on Google led me to a suggestion of adding the "isset" function. PHP Warning: Undefined array key "h" in /path-to-script/script.php on line 452 This error is connected to line 45 ...

phphtml

What is the best method for animating a display table to none or reducing its height to

My goal is to animate a header whenever the class collapseTest is applied. After some trial and error, I have come up with the following solution: http://jsfiddle.net/robertrozas/atuyLtL0/1/. A big shoutout to @Hackerman for helping me get it to work. The ...

javascriptcssanimation

Display the value of my JavaScript variable within a div element

I am having trouble displaying the JavaScript variable "dayz" in the results div. When I try to use alert(dayz) after the calculation, it works fine, but I need it to output the dayz variable in the HTML. Can anyone help me with this issue? <html> ...

javascripthtml

Creating a straightforward CSS design that stretches to fit the entire viewport dimension

I am attempting to create a simplistic layout using HTML/CSS, as depicted in the wireframe below: /------------------------------------------\ | | | header div | | ...

htmlcssxhtml

Can I use jQuery to disable all elements within a div, including anchor and paragraph tags?

Can anyone offer assistance with HTML and CSS? I am trying to disable all content inside a div that has the class "main-wrapper" when a user clicks on a logout button using a jQuery function. I have attempted two methods, but so far without success! funct ...

jqueryhtmlcssjquery-ui

Attempting to alter an image with a click and then revert it back to its original state

I'm currently working on a feature that toggles an image when a specific class is clicked. The code I have so far successfully switches from 'plus.png' to 'minus.png' upon clicking, but I need it to switch back to 'plus.png&ap ...

javascriptjqueryhtmltoggle

Is there a way to transfer the selected item's id from the dropdown to the Django form action URL?

Issue My problem is that I need to pass the ID from the selected transaction item in the dropdown to the form action URL 'cart_add'. I have successfully retrieved the ID from the selected dropdown value, but I am struggling to pass this ID to the ...

javascripthtmljquerydjangodjango-templates

Apply CSS styles when the text exceeds the size of the textbox

Is there a way to create a textbox that scrolls on hover only if the text is longer than the textbox itself? Check out my attempt here: https://jsfiddle.net/SynapticError/wqh4ts3n/35/ The text should scroll on hover if it's longer than the textbox. ...

javascriptcss

Issue with variable creation within ng-repeat

After reading a question on StackOverflow about determining the number of filtered out elements, I wrote the following code in Angular: <input type="text" ng-model="query" placeholder="Enter query..."> <div ng-if="filteredData.length!=data.length ...

javascripthtmlangularjsangularjs-ng-repeat

Emphasize an element when hovering over it

I am looking to create a custom hover effect for highlighting elements in a Chrome extension I'm developing. The goal is to achieve a similar behavior to using the magnifying glass tool in Chrome Dev Tools, where only the hovered element is highlighte ...

javascriptjquerycssgoogle-chromegoogle-chrome-extension

Utilizing the WebSocket readyState to showcase the connection status on the application header

I am currently in the process of developing a chat widget with svelte. I aim to indicate whether the websocket is connected or not by utilizing the websocket.readyState property, which has the following values: 0- Connecting, 1- Open, 2- Closing, 3- Close ...

javascripthtmlreactjstypescriptsvelte

Tips on utilizing jQuery or JavaScript to efficiently filter out outcomes exceeding a specified range

<input type="range" name="rangeInput" min="100000" max="750000" onchange="updateTextInput(this.value);"> Displayed above is the slider code that provides a value output below. <div id="sliderValue"> <p>Max Value £</p> <input t ...

javascriptjqueryhtmlinput

Position Bootstrap Modal in the center horizontally

I am working on an Angular project and struggling to center my Bootstrap 3 Modal horizontally on the screen. Despite trying various solutions like using text-align: center and align = "center", I have been unsuccessful. Can someone guide me on how to prope ...

csstwitter-bootstrapangular

Shifting text upwards within a document

I'm struggling with CSS and bootstrap as I have limited knowledge in this area. I have multiple divs on a page that I want to align based on our old website design. The problem I'm facing is that one div is larger on the right, causing a lot of ...

htmlcsstextbootstrap-5whitespace

What is the best way to target outer elements only using CSS selectors?

Having trouble with a CSS selector: $("td.cv-table-panel-element") This selector returns a list of elements, shown in the screenshot linked below: https://i.stack.imgur.com/RoVMj.png Each element represents a column in a table with unique content. The ...

jqueryhtmlcssjquery-selectorscss-selectors

What is the best method for obtaining table structure using Bootstrap dropdowns?

[Using span instead of table element][1] [Using the table element][2] Currently working with Bootstrap 5, my goal is to have a fixed-width table in place of dropdown menu items. I aim to position the text in the 3rd column all the way to the right. The da ...

htmlcssbootstrap-5

Unable to input Email ID and Password within a Selenium Java script for a Bootstrap dropdown menu on the website "https://qa01.pdng.pepsico.com/" without using a frame

To place your Email ID and Password into the appropriate input fields with IDs j_username and j_password, refer to the following HTML code snippet. There are no frames within this code preventing its utilization. ul class="nav__links nav__links--shop_in ...

htmlselenium