The header remains static when I decrease the window size

My header consists of a picture, which means I'm unable to use percentages for sizing. The header needs to have a fixed width and height. When I resize the window to make it smaller, the content on the page adjusts correctly, but the header remains the same size. This causes the header to overflow beyond the borders of the page, creating a scroll bar at the bottom.

Is there a way to crop or cut the header so that its height is always fixed, and the width automatically corresponds to the fixed height? Can the overflow of the header beyond the page's borders be hidden?

I am aware that I can use

body {
overflow-x:hidden;
}

but I don't feel like that's a satisfactory solution. Do you have any other suggestions?

Thank you!

css

Answer №1

If you're looking for a solution, here it is... Create a header div that spans 100% width and the desired height. Then give it a background image and set overflow: hidden;. This will automatically adjust to fit your page width without any scroll bars.

div{
    display: block;
    position: relative;
    width: 100%;
    height: 200px; /* Adjust height as needed */
    overflow: hidden;
    background: url(http://www.f-covers.com/cover/beach-fun-vintage-photography-facebook-cover-timeline-banner-for-fb.jpg) no-repeat center center;
}

The background image will maintain its original dimensions with this setup. If you prefer the image to stretch to fit the div, include the following in your CSS;

-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;

Check out this live example: http://jsfiddle.net/AWMQ6/

Hope this helps!

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

Utilizing :focus-visible pseudo-class on a custom control

A custom control, made of <div tabIndex="0">....</div>, raises the question: how can we ensure that it works with :focus-visible? Sometimes, creating a complex custom control using <div> and <span>, styled to resemble a na ...

htmlcssonfocus

Is it possible to ensure uniformity in the appearance of all images with MVC Image Handling?

I'm currently developing an MVC 4 application that allows users to upload images. These uploaded images are then displayed in a different view. Users can upload images up to 10MB in size, which are then resized to 800 x ? pixels using the WebImage (Sy ...

cssimageasp.net-mvc-4

Table row with CSS flexbox wrapping

I have a unique set of items, each consisting of: A left side that expands horizontally to occupy the space where the item name is located. A right box at the end containing a few actions. My goal is to ensure that the box with actions on the right wraps ...

htmlcssflexbox

javascript code to close slide div without hiding the setting icon upon clicking outside the div

Can you help me with an issue I am facing while implementing a slide div for creating theme color? The div works fine, but when I click outside of it, the div does not close. I have tried multiple solutions, but none seem to work. I have researched various ...

javascripthtmlcss

Text alignment validation in jQuery

utilizing the validation capabilities of the jQuery validation plugin check out: http://jsfiddle.net/Kn3v5/205/ <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script> <div> <form id ...

jquerycssvalidation

Troubleshooting problem with table display in Internet Explorer

I've been working on improving a website by using display: table, but I'm running into issues with Internet Explorer. Instead of displaying multiple cells in one row, IE is aligning them all in a single column. I even tried to set a pink backgrou ...

cssinternet-explorer-11css-tablesdisplay

Tips for adjusting custom spacing margins within Material UI Grid

Is there a way to adjust the spacing between Grid items in Material UI? Here's the code I currently have: <Grid container spacing={1}> <Grid item xs={6}>Node 1</Grid> <Grid item xs={6}>Node 2</Grid> ...and so ...

cssreactjsmaterial-ui

Creating a unique dropdown menu with HTML and CSS: Learn how to include a button in between each main link without disrupting the layout

I successfully implemented a navigation menu on my website by following this helpful tutorial. Below is the CSS code I used: ul { list-style-type: none; padding: 0; margin: 0; background-color: #F2C777; } li a { display: block; p ...

htmlcssdrop-down-menu

How to transform a hyperlink into a clickable element within an absolutely positioned container

I'm currently working on a photo gallery project and using magnific popup to create it. However, I ran into an issue with the hover event on the images that displays an icon when it's hovered over, indicating that it can be clicked to view more. ...

javascripthtmljquerycssmagnific-popup

CSS to Reverse Align Navigation Bar Text

I'm currently working on my first website and I've encountered a problem with the Navigation Bar. Using CSS rules to align the bar, I noticed that when I apply float:right;, the text floats to the right but ends up aligning backwards on the bar. ...

htmlcssnavigation

Exploring and deciphering the intricacies of the underlying technology

Apologies if this question seems misplaced, but as a complete beginner, I'm a bit lost. Let's consider this website as an example: I'm trying to uncover the libraries and technologies employed in the background to learn more and replicate ...

javascriptcssthree.jsoverlay

Is there a way to align these elements horizontally on the same line?

I am managing a website at To better illustrate my request, I have attached an image showing what I want to accomplish. I would like the elements on the site to align seamlessly with the "in stock" notification. https://i.sstatic.net/3qipq.jpg This is t ...

htmlcss

Angular JS has a unique feature of a scrollable drop-up menu that allows

https://i.sstatic.net/MOUqO.pngHere is the code snippet for my Dropup component: <div class="dropup"> <button class="btn btn-primary btn-raised dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false> ...

javascripthtmlcssangularjs

Switch the toggle to activate or deactivate links

My attempt at coding a switch to disable and enable links using CSS is functional in terms of JavaScript, but the appearance is not changing. I am lacking experience in this area. Here is my HTML Button code: <label class="switch" isValue="0"> ...

javascripthtmlcss

Limit the cell dimensions to a specific width and height

I initially set fixed widths and heights for the cells, but we decided to move away from that approach. Now I want the cells to be able to shrink and expand freely, but I also want them to stop resizing once they reach a certain width. <table align ...

htmlcss

Issues have arisen with the main background image in IE7 on ProLoser's AnythingSlider

Check out my website: Everything is working perfectly with AnythingSlider in all browsers except for IE7 - not really a surprise. The background image of the entire page seems to be offset differently depending on the browser size. After some investigatio ...

internet-explorer-7cssanythingslider

Adaptive component transformation

Hey there, I'm having some trouble figuring this out... I need help with making sure that the element identified by the red rectangle in the images moves in alignment with the containers below, regardless of the screen size. I want to create a respon ...

csshtmlresponsive-design

Angular Material's md-content utilizes its own vertical scroll bar

Struggling with a problem while using Angular 1.* and angular-material. The issue arises when dealing with views that plug into <div ng-view></div> and md-content. If the height of the view exceeds the viewport, it leads to the appearance of t ...

cssangularjsangular-material

The media query fails to start in the browser's mobile display

Instead of just adjusting the browser window size, I utilized Chrome's developer tools to make adjustments. I double-checked that the appropriate meta tags were included in the code: <meta name="viewport" content="width=device-width, initial-scal ...

cssmobilemedia-queries

Tips for creating multiple popups using a single line of JavaScript code

I am new to JavaScript and I am attempting to create a popup. However, I am facing an issue in opening two divs with a single line of JavaScript code. Only one div opens while the other remains closed despite trying various solutions found on this website. ...

javascripthtmlcsspopup