Spacious width that doesn't require a horizontal scrollbar for navigation

My dilemma is with the width of my body and background image. I set the body width to 1920px to match the background-image for the header. However, since I have a narrower wrapper inside the body, the header background's width gets cut off by the wrapper's borders if I put it in the header itself. So, I decided to place it in the body instead, but now I'm facing a horizontal scrollbar at the bottom and the center of the page has shifted to the right. How can I eliminate the scrollbar and center the page correctly? Below is the code:

body {
    background-color: #f6f6f6;
    background-image: url('../img/menu-background.png');
    width: 1920px;
    background-repeat: no-repeat;
    font-family: 'PT Sans';
}

.wrapper {
    width: 950px;
    min-height: 1658px;
    border: 1px solid grey;
    margin: 0 auto;
}

header a {
    text-decoration: none;
    text-align: center;
    display: block;
    width: 365px;
    margin-left: auto;
    margin-right: auto;
} 

Here is the HTML:

<body>
    <div class="wrapper">
        <header>
            <a href="#">
                <h1>Lorem ipsum</h1>
                <span>bla-bla-bla</span>
            </a>
        </header>

Answer №1

Avoid specifying the body width as 1920px.

Users using screens with higher resolutions will be able to see the entire background image regardless.

I suggest consolidating your background image tag onto a single line for cleaner code:

body {
    background: #f6f6f6 url('../img/menu-background.png') no-repeat center 0;
}

Answer №2

To avoid the scrollbar, simply include overflow-x:hidden; in your body's CSS.

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 is the best way to close a popup window?

Is there a way to close my popup? function hidePopup(){ document.getElementById("popup-1").classList.remove("active"); } @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap'); .popup .overlay{ positio ...

What are the best ways to position elements within a div?

In my small information div, I am looking to align the content on the right side. Specifically, 065 31 323 323, <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a5d4c4c1c0cbdfc4e5c2c8c4ccc98bc6cac8">[email protected]</ ...

Prevent ui-select from being highlighted when clicked

here's a dilemma : (all in angular 1) I'm using a ui-select like this : https://i.stack.imgur.com/RzH2u.png Here's the code snippet : <div class="formZone-group"> <div class="mandatory-fl"> <div class="man ...

Is there a way to eliminate the white background or border on my Font Awesome checkbox?

One issue I'm encountering with Font Awesome 5 is that, when I click on my checkbox, there is an unwanted white background or border that I can't seem to get rid of. /* Updating default snippet color for better visibility of the issue */ body ...

issues with jquery functionality on mobile devices

I'm currently working on a website where I've implemented a jQuery script to dynamically load specific parts of an HTML page with an ID of 'guts' into the main content area. The goal was to keep the menu consistent while only changing t ...

Is there a way to extract the properties of a CSS class from a stylesheet and convert them into a hash using JavaScript or jQuery?

I am exploring a way to extract key value pairs from a CSS stylesheet related to a specific class or id into a JavaScript object for data accessibility. It is important to mention that I do not intend to apply this class directly to any DOM elements. In ...

Ensure that radio buttons are positioned next to their respective labels on separate lines

My HTML form is structured with sections as described below: I prefer having the labels inline to prevent the section from being excessively tall, but I'm facing an issue where the radio buttons are not staying aligned with their respective labels. ...

Trouble with z-index property within the confines of the <ion-segment-button></ion-segment-button> tag

The z-index property seems to be having no effect on the elements within the ion-segment-button. I attempted to adjust the positions of the elements and set the z-index to 999999 with the button z-index set to -1. However, this solution did not work as ex ...

The CSS is getting overridden by the a:-webkit-any-link user agent stylesheet

I've found myself faced with a page full of lists and links that I need to style individually. No matter what I try, the fonts and colors keep getting overridden by an unknown user agent stylesheet. I've experimented with styling the divs using c ...

Is a fixed div located inside a fluid grid container?

Having developed a website with a fluid 12 column grid, I am looking to lock the position of a div in the right hand column once it reaches the top of the page (using something like StickyJs or a similar tool). However, when the fixed position is applied, ...

Flexbox and CSS3 width/height declarations causing problems with vertical alignment

Struggling to vertically center a nav element and align it to the right of the screen? There seems to be something causing it to shift slightly off-center. In this setup, the red represents the flex container, the green is the header, and the grey box is ...

The Oracle Apex Login Interface with a Touch of Customized Styling

Currently, I'm working on creating a login page in Oracle APEX. While modifying the icon using CSS code, everything seems to be falling in place except for this one particular line: .t-Login-logo { background-image:url(#APP_FILES#LogoUpdated.jpg); bac ...

The attribute 'checked' is not a valid property for the 'TElement' type

Learning about typescript is new to me. I have a functional prototype in fiddle, where there are no errors if I use this code. http://jsfiddle.net/61ufvtpj/2/ But in typescript, when I utilize this line - if(this.checked){ it presents an error [ts] Pro ...

Text fields do not show a cursor icon

On the website http://www.legrandclub.net, there are two text fields. Everything works fine in all web browsers except for Internet Explorer. When I click on one of the text fields, the cursor is not displayed, although it is possible to write text. What c ...

What is the best way to design a footer that remains fixed at the bottom of the screen but becomes unfixed when the user scrolls down?

Currently, I am working on creating a footer that remains fixed at the bottom of the user's screen regardless of the screen size. However, I also want the header to transition from a fixed position to being part of the page when the user scrolls down. ...

The CSS Grid does not align properly in the horizontal direction when displayed on mobile devices

I am currently working on a responsive layout where the header and footer should each take up around 5% of the screen space and remain fixed. The middle section should scroll based on the number of elements within it. Despite using the fr and % values, the ...

How to lineup social media icons across on a Tumblr blog

I managed to successfully integrate the like and tweet buttons into my blog, but I'm struggling with aligning them horizontally after each post. My goal is to position the tweet button just to the left of the facebook like button for a cleaner layout. ...

Deciding on the proper character formatting for each individual character within the RICHT TEXT EDITOR

After browsing numerous topics on Stackoverflow, I was able to develop my own compact rich text editor. However, one issue I encountered is that when the mouse cursor hovers over already bold or styled text, it's difficult for me to identify the styl ...

How to create a scrolling fixed div that moves horizontally and repositions to the center when the page is maximized

I've been searching for a solution to my problem and have managed to figure out the first part, but there's still one issue that I could use some help with. While I have some knowledge of html, css, and basic php, I'm completely new to javas ...

Position the image at the center above the text

I am trying to position multiple images side by side, with each image having a date displayed beneath it. The challenge I am facing is that the length of the date extends beyond the width of the image, and I would like to center the image on top of its c ...