I have set a limit on the overall width of the elements, but I would like a particular element to

I set a global width, but I'm having trouble getting a specific element to exceed that limit. This element consists of text with a background image, and I want the image to extend beyond the width constraint. However, when I try to widen the element, the text also exceeds the specified width.

My attempt to manually increase the width of the element using width:150% resulted in the text exceeding the limit as well.

html, body {
    font-size: 1em;
    background: transparent;
    display: block;
    width: 1222px;
    margin: 0 auto;

}.wrapperbody {
    background-image:url("background.jpg");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    margin-top: 10%;
}
<div class="wrapperbody">
    <div>
        <h1>test</h1>
    </div>
</div>

I've been trying to enlarge the background image of a specific text without affecting the entire text content.

htmlcss

Answer №1

It is advisable to avoid structuring the page in such a manner; instead, it is better to declare widths for sections individually. Failure to do so will result in issues with setting the background properly and could lead to further complications.

However, if you insist on maintaining this layout, you can try the following tricks:

html,
body {
    font-size: 1em;
    background: transparent;
    display: block;
    width: 200px;
    margin: 0 auto;
}

.wrapperbody {
    margin-top: 10%;
position: relative;
}

.wrapperbody > * {
position: relative;
z-index: 1;
}

.wrapperbody::before {
position: absolute;
z-index: 0;
content: '';
display: block;
top: 0;
left: calc((100vw - 200px) / -2);
right: calc((100vw - 200px) / -2);
bottom: 0;
background: none red;
}
<div class="wrapperbody">
    <div>
        <h1>test</h1>
    </div>
</div>

For additional reference, visit this JSFiddle

Once again, I strongly recommend rethinking the current layout approach.

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

What are the steps to create a "gooey glide" animation using React and MUI?

I am looking to create a unique animation for my list of items on a web page. My goal is to have the items slide in one by one with rapid succession and then slightly shrink once they reach their final position, similar to how pillows might fall or like a ...

cssreactjsanimationmaterial-uicss-transitions

send data to a hyperlink

I need to pass a parameter to the href based on the first name in the list. The names are links to another page that I retrieve via an _id passed in the URL. The issue I am facing is that the id is not being passed to the URL, resulting in an error. How ...

javascripthtmlnode.jsexpress

Is it possible to customize the appearance of these buttons using CSS to change their color, text color, etc?

Looking to customize the buttons on a site that uses templates that can't be modified directly. I have to rely on a CSS file to style the elements as the buttons are created using tables within table cells. How can I change the background color of the ...

htmlcss

Turn off automatic spelling correction and predictive text in a content-editable section

I'm currently working on a cross-browser application using Script#. I've incorporated a contenteditable div where users can input text. However, I am facing an issue with the auto correct/auto completion feature altering the user's text. Co ...

javascripthtmlcssscript#

What is the best way to assign a value to an option element for ordering purposes?

My select element is being populated with fruits from a database, using the following code: <select name="fruitsOption" id="fruitsOptionId" ngModel #fruitRef="ngModel"> <option *ngFor="let fruit of fruits">{{fruit}}</option> </selec ...

htmlangulartypescript

Navigating the web page and locating the appropriate Xpath element to extract

Here is the HTML that needs to be extracted: <input type="hidden" id="continueTo" name="continueTo" value="/oauth2/authz/?response_type=code&client_id=localoauth20&redirect_uri=http%3A%2F%2Fbg-sip-activemq%3A8080%2Fjbpm-console%2Foauth20Callbac ...

htmlregexseleniumxpathselenium-webdriver

Solving the "ExpressionChangedAfterItHasBeenCheckedError" in Ionic: A Guide

//html <span style="margin-left:43%;background-color:rgb(229,229,229);border- radius:10%">&nbsp;&nbsp;{{formatEpoch(epoch)}}&nbsp;&nbsp;</span> //ts lastdate:any; formatEpoch(epoch): string { ...

htmlangulartypescriptionic-framework

Hover over the text to reveal an image displayed in a separate div using CSS

I'm attempting to create a website similar to this one where hovering over text reveals an image in the background. Despite trying various methods suggested here, I haven't had any success so far. The closest I've come is following this solu ...

csshovervisibilitymouseoverdisplay

Is it possible to load MySQL data into an HTML form?

My Inquiry: https://i.sstatic.net/QnRVk.png I'm currently developing a web-based product catalog that includes an edit feature. At present, I have a drop-down menu that displays all the products stored in my SQL database. Is there a way to automatic ...

phphtmlmysqlmysqli

Scrolling through the page, press the "Read Less"

I've implemented a Read More/Read Less button feature for product descriptions on my website. One issue I'm facing is that when I click the Read Less button at the bottom of the extended description, the text shortens as expected but the page do ...

javascripthtmlcssbuttonscroll

Updating variable values in AngularJS while navigating through routes

How can I dynamically set the flag icon inside the page header based on the selected language using AngularJS? The language selection is done in a separate .htm file and all managed by AngularJS routing. My application has a single controller called "appCo ...

javascripthtmlangularjsroutes

The text next to images is being clipped (is it CSS?)

Encountering a problem with CSS on my Wordpress websites. Using WP's editor to float images to the right or left of text, I noticed an issue when viewed on mobile: https://i.sstatic.net/gVFRq.jpg The text gets cut off. How can I ensure that no tex ...

csswordpress

Discover the default text highlighting color of a browser with the use of JavaScript or Dart programming

Did you know that you can change the browser's default text highlight (selection) background color using CSS? For example: ::selection { background: #ffb7b7; } Find out more about the browser/OS specific default background color when selecting tex ...

javascripthtmlcssbrowserdart

Gradually eliminate the background color in one smooth motion

When new messages appear, I want them to be subtly highlighted as users hover over them. The background color will slowly disappear on hover thanks to the CSS code provided below. However, this effect should only happen once, which is why I need to remov ...

javascriptjquerycss

Download the ultimate HTML package with a built-in chart.js component directly from your nuxt app

I have a task to create a compact Nuxt application that produces a basic HTML file containing informative sections about the services offered to the clients of my organization. The main purpose is to generate an HTML file that can be easily downloaded and ...

javascripthtmlvue.jsnuxt.jsserver-side-rendering

Dropdown does not populate with data

HTML content <select class="form-control" tabindex="-1" id="superId" name="superId[]" multiple="multiple" required="required" data-bind="options: SupArray, optionsText: ' ...

javascriptjqueryhtmlajaxknockout.js

What is the best way to create a "tile-based board" for this game?

I am working on a project to create a board made up of tiles, but I am facing difficulty in filling up the entire board area. Currently, I have only managed to create 1 column of the board, as shown in the image. Can someone guide me on how to fill the ent ...

javascripthtmlcssweb

Retrieve the browser version of a client using C# (When Internet Explorer Compatibility mode is activated)

Is there a way to retrieve the actual version of the client's browser from C# code? Using Request.Browser or HTTP_USER_AGENT provides details, but in Internet Explorer (IE), when compatibility mode is enabled, it always returns IE 7 regardless of the ...

c#htmlasp.netinternet-explorer

Struggling with creating a slideshow - is the display set to none?

I've been working on a jQuery slideshow project and have encountered an issue where a hidden element is not showing up as expected. Below is the code I'm using: <section id="content"> <div id="jumbotron"> <div class="s ...

jqueryhtmlcss

Various conditional statements based on the dropdown menu choice

I currently have a basic dropdown menu on my webpage that enables users to switch between viewing Actual or Planned dates/times in a table (I am utilizing the controller as syntax): <select ng-model="trip.viewType"> <option value="actual"> ...

javascripthtmlangularjs