Utilizing CSS to adjust the position of a background image at its starting point

I'm looking to create a unique design for the sidebar on my Tumblr page, where the header has a curved shape while the rest of the sidebar has a squared-off look with 100% height. This design should flow seamlessly off the page without a visible footer. However, I'm facing an issue with the current coding as the square background is showing at the top of the curve, which disrupts the transparent effect I'm aiming for.

Check out the live preview here.

Below is the code snippet used for the side bars:

    #left, #right {
            background-image: url('http://static.tumblr.com/gxcukg0/VOFn4jkk6/bg-sidehead.png'), 
                url('http://static.tumblr.com/gxcukg0/6SUn4jkk3/bg-side.png');
            background-repeat: no-repeat, repeat-y;
            background-color: #b8a6a5;
            position: absolute;
            min-height: 100%;
            top: 0px;
            width: 345px; }

Is there a way to achieve my desired layout without the need for creating a separate div for the top of each side?

csshtml

Answer №1

In order to make this solution function properly, it is necessary to utilize the :before selector:

#left:before, #right:before{
    height: 120px;
    width: 380px;
    background-image: url('http://static.tumblr.com/gxcukg0/LOPr5jkk9/bg-sidehead.png');
    position: absolute;
    top: -120px;
    content: " ";
}

#left, #right {
    background-image: url('http://static.tumblr.com/gxcukg0/7KJn4jkk1/bg-side.png');
    background-repeat: repeat-y;
    position: absolute;
    min-height: 100%;
    top: 120px;
    width: 380px;
}

Take note that I've adjusted the main divs by increasing top: 120px;, raised the :before section with top: -120px;, and transferred the header background image to the :before section.

Answer №2

If you want to achieve a specific positioning for your image, one of the most effective ways is to utilize the CSS style background-position. Here's an example:

img {
  background-position: -10px 0px;
}

By applying the above code, the image will be shifted by -10px to the left and 0px to the top.

I trust this explanation was beneficial to you!

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

Creating and adding nested div elements with the power of JavaScript

My goal is to utilize JavaScript for updating the CSS layout as the webpage loads. Below is the code I have been working on: var container = 0; // Total UI Container var containerTitle = 0; // Title Container var article = 0; var articleTitle = 0; var ...

javascriptcsshtml

Steps for positioning an image to overlap the background image

Do I need JavaScript or is HTML and CSS sufficient? If so, should I utilize position or other properties for that? If my description is unclear, a visual demonstration in the form of an image might help. ...

htmlcss

Loop through multiple levels of elements using jQuery

I have a snippet of HTML that resembles the following structure: <div class="block"> <div id="item1"></div> <div id="item2"></div> </div> <div class="block"> <div id="item3"></div> </di ...

jqueryhtmlloopsforeach

Utilizing HTML imports in Typescript for efficient use as TemplateStringLiteral

Recently, I started using TypeScript for the first time and I'm looking to integrate it into my webpack build. Currently, I am working with ts-loader and babel-loader to load TypeScript files while also attempting to include HTML files within the scr ...

htmltypescript

Footer positioned centrally on screen

My webpage footer seems to be misplaced, appearing in the middle of my content instead of at the bottom where it should be. Surprisingly, the code for the footer works perfectly on other pages. Any suggestions on why this might be happening? I've sco ...

htmlcss

In what way are these columns altering their layout without the use of JavaScript?

While I was searching for a solution to organize content based on screen size, I came across this website. The layout of the site changes depending on the size of the browser window. When I resize my browser or view the site on a phone, the large image at ...

javascriptjqueryhtmlcss

Is there a method to check if my input fields are filled before the bootstrap modal can be triggered in PHP?

Is it possible for the modal button to validate if the textboxes before it are empty? If they are, can we prevent the user from proceeding until they are filled? Check out the code below: <form class="form-horizontal form-signin-signup" action="signup ...

phpjqueryhtmlcssbootstrap-modal

A JavaScript alert function that triggers no matter the return value

An alert is being sent by a function when a radio box's value returns as null, even though it should have a value that is not null. The issue lies in another function on the page that hides the tables where these radios are located, making it difficul ...

javascriptjqueryhtmlasp-classic

The button labeled "issett" is malfunctioning

Hey there, so I've created a registration form using jQuery and PHP that validates user input in real-time as they type. Once all the information is correct, I want to allow the user to submit the form. My plan is to write an if statement that checks ...

javascriptphpjqueryhtml

I am having trouble getting my textarea to accept width attributes

Strangely, the text area on my website just won't cooperate with the width I specify. I've double-checked the CSS multiple times to no avail! Take a look at this jsfiddle example that demonstrates what I'm trying to achieve. However, on my ...

htmlcsstextarea

How to align the "bootstrap navbar li items" in the center across all page widths

I'm trying to center the li items "on the entire page width" in this basic bootstrap navbar that I've shared. I attempted using "justify-content-center" in the parent. It did center the navbar items, but not across the entire page width. The ite ...

htmlcsstwitter-bootstrapbootstrap-5

Sending a PHP variable to a JavaScript function

When attempting to pass a value to a JavaScript function by clicking a link, I encountered an error message: Uncaught SyntaxError: Unexpected identifier The following is the code snippet: <?php include_once("php_includes/check_login_status.php") ...

phpjavascripthtml

Exploring the beauty of ASCII art on a webpage

Having trouble displaying ASCII art on my website using a JavaScript function, the output is not as expected... This is how it should appear: https://i.sstatic.net/MCwPb.png And here is the code I am trying to implement for this purpose: function log ...

javascripthtmlascii-art

Tips for creating a transition effect when hovering over a CSS sprite

Below is a snippet of my CSS sprite code: #IconSet a { width: 36px; height: 36px; display: inline-block; } #DeviantArtIcon { border-width: 0px; border-style: none; background-image: url(http ...

csshovercss-transitionstransition

What is the best way to incorporate (+/-) buttons to increase or decrease numbers in this code snippet?

Hey everyone, I hope you're all doing well! I need some assistance in transforming this quantity picker from a dropdown to have buttons like the one shown here with plus and minus symbols: https://i.stack.imgur.com/O0uUa.png I would like to impleme ...

javascripthtmljquerybootstrap-4

Quickly switch the outline state of a Bootstrap toggle button

Using the latest version of Bootstrap (5.0) that supports importing from inline HTML, I am working on creating a toggle outline button as shown below. <button type="button" class="btn btn-outline-dark" data-bs-toggle="button&quo ...

htmlcssangularbootstrap-4toggle

Tips for retaining form inputs without the need for a submit event when the page is reloaded or refreshed

I have a form on a page with multiple text inputs In addition to the form, I have implemented Zend pagination to allow users to select results. However, when using Zend paginate, the user's form inputs are lost because it is not submitted. Since th ...

phpjavascriptjqueryhtmlzend-framework

Creating a div resizing function using only JavaScript is a fun and useful project to tackle

Seeking help to create a div resizer using only pure JavaScript as jQuery is restricted. The current functionality works, but breaks when the position of the slider-div is not set to absolute. Any solutions to fix this issue would be greatly appreciated. ...

javascripthtmlcss

Updating the Hero Image

Scenario: In my project directory, under Product -> src -> static -> ostatic [ there are two folders named css and images ] -> images -> where all the images can be found. I am using bootstrap and attempting to set a background-image for j ...

cssdjango

HTML integration of JavaScript not working as expected

My experience with separating files in HTML and JS has been positive - everything works smoothly when I link the JS file to the HTML. However, an issue arises when I decide to include the JS code directly within <script> tags in the HTML itself. The ...

javascripthtml