Set the background image width to 75% of the screen size

I want to use this image https://i.sstatic.net/gt30c.jpg

as a background for a section on my page. My preference is to have the white part cover only 75% of the screen, stopping before reaching the content in the left grid.

Is it possible to achieve this? I attempted the following CSS:

background: rgba(0, 0, 0, 0) url("../img/page-bg.jpg") repeat-y scroll left center / auto 75%;

Unfortunately, it didn't work as expected.

Can anyone help me make this work? I am using Bootstrap 3 grid system with columns:

lg-9 (Content) & lg-3 (Right side navigation menu)

Thank you!

htmlcsstwitter-bootstrap

Answer №1

When adjusting the height, consider using 75% instead of auto 75%. Simply use 75% auto for a cleaner solution.

background: #000  url("../img/page-bg.jpg") repeat-y left center;
background-size: 75% auto;


div {
  width:300px;
  height: 600px;
  float: left;
  background: #000 url(https://dummyimage.com/300x300/cccccc/ff0000.png&text=Sample-Text) repeat-y left center;
  background-size: 75% auto;
}
<div>

</div>

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

Align the center element vertically on a website with a Bootstrap 4 navigation bar

I am trying to vertically center an element on the page. It works fine until I add a Navbar, which causes the element to be centered with an offset from the height of the Navbar. How can I center the content container vertically while accounting for the Na ...

htmlcsstwitter-bootstrap

Tips for toggling the visibility of a flexbox-styled popup using jQuery

I am trying to implement a popup on my website and I want to use flexbox styling for it. I have the necessary scss mixins for flexbox properties, however, I encountered an issue. The problem arises when I try to hide the popup using display: none, as the ...

javascriptjqueryhtmlcssflexbox

A method for positioning each pair of <li> elements side by side

My goal is to arrange every pair of li elements next to each other (e.g. 0-9, A-B, C-D, ...). Currently, they are aligned one by one. <ul> <li class="alphabetRow"><a href="#" id="alpha_1" class="alphabet active" >0-9</a></li ...

htmlcss

Clicking on the overlay does not close the bootstrap collapsed toggle

I'm currently facing an issue where I need to add a listener that closes the menu when clicked away. The code snippet below shows my attempt at solving this problem: $("body").click(function(e){ var $box1 = $('.navbar-toggle'); var $b ...

jquerycsstwitter-bootstrap

What is preventing a nested flexbox from expanding to the entire width?

Here's an example of some HTML/CSS code: <div style="display: flex; background-color: yellow;"> <div style="display: flex;background-color: lightblue;">i am a NESTED flexbox</div> </div> This results in https://i.sstati ...

htmlcssflexbox

HTML anchor tag failing to redirect to specified link

I need to populate the URI property from an API result into an HTML format. I attempted to achieve this by calling a function and running a loop 3 times in order to display 3 links with the URI property of each object. However, the code is not functioning ...

javascripthtmljsonurianchor

Issue with locating an item in a dropdown menu while using Selenium

I am currently attempting to locate an element within a dropdown list in my Selenium test. Despite identifying the xpath using Firebug, the Selenium code is unable to find it. My goal is to pinpoint option value number 2 in the following html snippet: < ...

htmlxpathseleniumfirebug

What is the best way to make the buttons on my website shift downwards?

I'm currently working on making my website mobile-friendly. I've managed to stack the buttons on top of each other when the width reaches 700, but now I'm struggling to make them move down the screen. Some resources suggest using absolute po ...

jqueryhtmlcss

Struggling with Bootstrap 5: Issue with full width footer display

Struggling with making the Bootstrap footer in full width? I've been using the Bootstrap footer example but can't seem to figure out how to achieve a full-width footer. https://i.sstatic.net/uGOdz.png <link rel="stylesheet" href="https://c ...

htmlcsstwitter-bootstrapbootstrap-5

The menu is about to receive some custom styling

I have come across a webpage where I need to make some modifications, but I am unable to locate the script responsible for applying the inline style. This issue only seems to be occurring on the mobile version with the dropdown menu. <div class="is-dri ...

javascriptjquerycssmenu

What's the secret behind the functionality of this jQuery menu?

As I was browsing the website , I noticed that they have a menu in the top header with links like "Freebies" and "Inspiration". I searched for where the code for this menu is located, but couldn't find it. Can anyone help me locate the code? I' ...

jqueryhtmlfirebug

How to circumvent an email forwarder that removes attributes from an image tag and still track email opens?

While it may seem like an impossible task, I decided to give it a try. If the service I am utilizing removes the attributes of an image tag =>, is there a workaround available? I attempted inserting random unicode characters to disrupt the parser, but ...

htmlemailtagsimagetracking

Styling Rules for WebKit Browsers

Is there a method to apply a particular CSS style for a div based on whether the user is accessing the page from a Chrome browser on a Desktop or an Android device? .myDIV{ [if CHROME???] width: 280px; [if ANDROID???] width: 100%; } Seeking guidance on ...

androidcssgoogle-chrome

Why does the IMG keep loading every time the web page is refreshed?

I am experiencing an issue with my html page where the background images are not reloading when I refresh the page, but the logo image is. The background images are called through an external CSS file, while the logo is used with an <image> tag. Wh ...

htmlcss

What methods can I use to streamline integration with minimal lines of code?

Seeking help with JavaScript: Recently dived into JavaScript and managed to create the desired functionality for my navigation menu. However, I suspect that my code is not optimized as I find myself repeating lines unnecessarily. Here's a snippet of ...

javascripthtml

Ways to avoid Bootstrap popovers from automatically breaking lines

I am struggling with adding a tooltip using Bootstrap's popover. Here is what I have tried: <ul> <li>Entry 1 ....................................................................</li> <li>Entry 2 ...................... ...

htmltwitter-bootstrappopover

Center content within a div using the middle alignment

Here's a question that goes beyond your typical "vertical align center" query. What I want to accomplish is to take a div with an unspecified height and position it at a specific percentage down the page, let's say 33%. I have managed to get this ...

htmlcss

Setting the width of input-group inputs is a feature introduced in Bootstrap 4

Need assistance with a problem involving an input-group in bootstrap 4. Within the input-group, there are two inputs— one with a prepend and the other with an append. The setup is contained within a col-12 div in a form-group, and the goal is to set spe ...

htmlcsspositionbootstrap-4

Eliminating the admin-bar.php styling in a WordPress theme

Currently, I am working on developing my very first WordPress template. I have encountered an issue with the top navigation being pushed down by a specific style rule: html { margin-top: 32px !important; } After investigating further, I discovered that t ...

phphtmlcsswordpress

I am still receiving an empty dropdown value despite implementing ng-selected

I am having issues with using ng-selected to retrieve the selected value from a dropdown. Instead of displaying the selected value, it appears blank. Here is the code snippet I have tried: <div> <select id="user_org" ng-model="selectedorg.all ...

javascripthtmlangularjs