Displaying an image that spans the entire width of the browser

I'm currently working on a WordPress site and have encountered an issue with the header image. I want it to span the full width of any browser window.

The existing code in the parent theme is as follows:

background: url("/test/wp-content/themes/Howtopassyourexams.com/Theme/images/page-header-bg.jpg");
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
background-size: cover;
position: relative;
box-shadow: 0 7px 10px -10px #000;
width: 100%;
z-index: 0;
height: 300px;
margin-bottom: 80px;

In addition, there is a second stylesheet in the theme that inherits most styles from the parent stylesheet. The CSS for the image in that stylesheet is:

background: url("/test/wp-content/themes/Howtopassyourexams.com/Theme/images/page-header-bg.jpg");
width: 100%;
height: 300px;

Although I am not sure why there are two sets of CSS codes for the heading image in different stylesheets, this is how the theme was designed. My problem is that even when setting the width to 100%, the image maintains its original size (1369x325px) and gets cut off on smaller browsers.

If anyone can provide insight on what I might be doing wrong, please visit our website at

Thank you.

htmlcsswordpress

Answer №1

The first rule in the stylesheet specifies the size of the background image using the keyword cover.

However, the second rule's width: 100%; only affects the width of the surrounding element and not the background image itself, which remains at cover.

To adjust this, you need to include:

background-size: 100%;

in the second rule.

Answer №2

To achieve this effect, you have two options. The first one involves placing the image within a relative div and then applying the following CSS:

img {
  position: absolute;
  width: 100%;
}

Alternatively, you can simply use the vw unit like so:

img {
  width: 100vh;
}

If you are working with a background image, you can utilize background-size: 100%;

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

Solution: Resolve clientY scrolling issue within an HTML document

I am facing an issue with the positioning of my context menu. When I right-click and scroll down, the menu does not maintain its regular position. Instead of appearing to the right of the mouse cursor when stationary, it moves below the cursor based on how ...

javascripthtmlcssbootstrap-5

What is the method to create a polygon in its entirety by utilizing a for loop within Javascript?

After successfully using the Canvas of HTML to draw a convex polygon, I encountered an issue. In the provided code snippet, t2 represents an array of points with getX() and getY() methods. The drawing function performs as expected until it reaches the seg ...

javascripthtmlhtml5-canvas

Transforming data from an HTML table into a MySQL database

Is there a way to transfer data from an HTML table created with JavaScript to a SQL database? I have been experimenting with the addRow(tableID) function but it doesn't seem to work. Any suggestions on how to solve this issue? Below is the code snipp ...

javascriptphphtmlmysqlsql

The jQuery AJAX response consistently comes back empty

Hello, I'm currently working on creating an HTML form and I need to validate it before submitting the form action. However, when I use AJAX to respond, I keep receiving a blank message. Can anyone help me with this issue? $(function(){ $("#ajax-p ...

javascriptjqueryhtmlajaxvalidation

Sticky Sidebar Attached to Parent Container with Smooth Sliding Effect

Is it possible to have my sidebar push the content across when opened, while keeping the fixed navigation relative to its parent element instead of the viewport? The sidebar works fine in Firefox but breaks out of the parent in Chrome. Link to JSFiddle & ...

jqueryhtmlcss

Using a class variable to access canvas methods in Javascript

As someone new to Javascript, I am facing a bit of confusion when it comes to classes and objects. Recently, I refactored some code into a working class but the process did not go as smoothly as I had hoped. Despite searching through Stackoverflow, Google ...

javascripthtmlobjectdomcanvas

Transforming a radio button into a checkbox while successfully saving data to a database (toggling between checked and unchecked)

I have limited experience in web development, but I recently created a webpage that allows users to input data into an SQL database. While my code is functional, I believe there's room for optimization. I pieced it together from various online resourc ...

javascriptphphtml

HTML list with clickable elements for querying the database and displaying the results in a <div> element

Patience please; I am a newcomer to StackOverflow and this is my inaugural question. Struggling with writing an effective algorithm, I wonder if my attempts to "push" it forward are causing me to complicate what should be a straightforward concept, or if i ...

javascriptphphtmlmysqlajax

Is there a way to eliminate unknown white gaps in the content?

I have encountered a very perplexing issue. When accessing this site on Safari, an additional 4-500px of scrollable whitespace is added. This is clearly not the intended behavior, but I am struggling to understand what is causing this space :S Upon inspe ...

htmlcsswordpress

Tips for integrating PHP into a Bootstrap modal dialog

After discovering and modifying a php script designed to process contact form content and display alerts on a Bootstrap 3 modal window, I encountered some issues. While I was able to successfully display errors and show the modal onload without any php con ...

javascriptphphtmltwitter-bootstrap

Display a snippet of each employee's biography along with a "Read More" button that will expand the content using Bootstrap, allowing users to learn more about each team

I have successfully developed a Google App Script that links to a Google Sheet serving as a database. The application iterates through each row, and I showcase each column as part of an employee bio page entry. ex. Picture | Name | Title | Phone | Email ...

htmlcssarraysbootstrap-4

Tips for retrieving data from an Excel spreadsheet on an HTML/CSS webpage

I have a single HTML template at this location: . The current page is tailored for the state of Arkansas in the US, but I now need to replicate the design for all 50 states. Each state page will have the same layout, but different content specific to that ...

javascriptphphtmlcssasp.net

Sidebar collapse using Bootstrap

I have been working on creating a collapsible sidebar that pushes the content on the right, but I'm facing issues with responsiveness. When I display the sidebar, the content is getting compressed instead of pushed. I tried adding flex-shrink-0 to the ...

csstwitter-bootstrapbootstrap-5

How to make the slides in a Bootstrap 4 carousel slide in and out with animation

I'm currently utilizing the bootstrap 4 carousel and have made some customizations to fit my project needs. The main requirement is: When I click on the next slide, the current next slide should become active and a new next slide should load with ...

javascripthtmljquerycssbootstrap-4

Troubleshooting Vue.js rendering problems on Safari_BROWSER

I'm encountering a strange issue with my portfolio website, which is built using Vue and Laravel. The problem arises specifically in Safari - the project thumbnails don't display until the browser window is resized. Here's the relevant code ...

htmlcsslaravelvue.js

Concealing tooltip when button is clicked using jQuery

I am facing an issue where the tooltip does not hide on button click. Below is the code for the button in question: <button class="btn btn-outline-inverse ajax_addtocart additems ...

javascriptjqueryhtml

The mysterious case of the missing CSS file in Node.js

I recently set up a new Node.js Express Project. However, I am facing an issue with the index.ejs file showing the error: Undefined CSS file ('/stylesheets/style.css'). Here is the content of the index.ejs file: <!DOCTYPE html> <html& ...

javascripthtmlcssnode.jseclipse

Using a scrapy spider to navigate through microsoft.com in search of the sign-in link

I have encountered an issue while trying to locate the sign-in link using a scrapy crawler on various websites, such as www.microsoft.com. Initially, the response I receive from the website does not contain the sign-in link. However, upon inspecting the "V ...

htmlscrapyweb-crawler

Prevent Child Elements from Overstretching Container with Bootstrap Flex

I'm working on a layout where all elements can be viewed without the need for scrolling. Any panels that require more space should be scrollable. In the following example, I want the contents of main-left to be scrollable without stretching the entire ...

javascripthtmlcssbootstrap-4flexbox

Show the jQuery code block as HTML within a textarea

I'm in need of a way to display script reference code in a textarea for easy copying by users. <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js"/> Even though I am using jQuery, all the solutions I ...

jqueryhtmlinnerhtml