Issue with the position of a fixed background image at 100% scale

I have successfully implemented a background image on my website that stretches to 100% width and height of the browser window, using the body element with a fixed position. Additionally, I have added fixed borders by following this method: http://css-tricks.com/body-border/

You can see the result here:

The only issue I am facing is that the background image is stretching all the way to the edges of the browser window rather than to the bounds of the body element (or the green area) despite having 10px padding on the html element.

It appears that setting the background-size to 100% makes it cover 100% of the browser window instead of the containing element's size.

Is there a solution to work around this problem?

Thank you.

htmlcssbackground

Answer №1

After making some changes to your CSS, here is the updated version:

html{

}

body{
 padding:30px;   
background:url(images/bg2.svg) no-repeat fixed;
background-size:100% 100%;
margin:0;
}

.site-border{
background:#352e2e;
z-index:10;
}

#top{
position:fixed;
top:0;
left:0;
width:100%;
height:10px;
}

#bottom{
position:fixed;
bottom:0;
left:0;
width:100%;
height:10px;
}

#left{
    padding:10px;
position:fixed;
left:0;
top:0;
width:10px;
height:100%;
}

#right{
    padding:10px;
position:fixed;
right:0;
top:0;
width:10px;
height: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

Moving Jquery Anchor Elements to New Line When Hidden

I have just started learning JQuery (and JavaScript/AJAX in general) and I am running into an issue with hiding elements. When I use the following code, the animation works and the element is hidden. However, as it disappears, it gets shifted to a new lin ...

jqueryhtmlajax

How to maintain the chosen language in a multi-language website using C# and ASP.NET?

I'm encountering an issue with my code where the selected language changes properly, but reverts back to the default language when navigating to another page on the website. For example, if I select English, the entire page is displayed in English, bu ...

c#asp.nethtmlmultilingualispostback

Ways to center text in a div using vertical alignment

/* Styles for alignment */ .floatsidebar { height: 100%; float: left; overflow: hidden; width: 30px; line-height: 1.5; } .vertical-text { height: 100%; display: inline-block; white-space: nowrap; transform: translate(0, 100%) rotate(-90 ...

htmlcss

Utilizing the retina pixel ratio media query in Internet Explorer 8

I'm currently working on a project to develop a responsive website using SASS/Compass, and I am incorporating retina icons by utilizing generated sprites. In my .scss file, I have created a mixin for including these icons. Here is my mixin for retina ...

cssinternet-explorer-8sassmedia-queriesretina

Troubles with CSS drop down alignment in Internet Explorer 7

I've been racking my brain all morning trying to solve this issue. My current project involves creating a website for a client, and I'm having trouble getting the dropdown menu to position correctly in IE7. It's working fine in all other br ...

htmlcssxhtmlinternet-explorer-7

Managing input jQuery with special characters such as 'ä', 'ö', 'ü' poses a unique challenge

Hey there, I'm running into a bit of trouble with my code and I can't figure out why it's not working. Here's a brief overview: I created my own auto-suggest feature similar to jQuery UI autosuggest. Unfortunately, I'm unable t ...

javascriptjqueryhtmlstringencoding

What steps can I take to address the issue of inconsistent vertical alignment of placeholder text on both desktop and mobile

The alignment of my input placeholder text varies across different browsers and devices. While it appears correctly in Firefox and Chrome desktop, Safari desktop and mobile, as well as Firefox Mobile and Chrome Mobile display the text too high. I've ...

htmlcssalignmentvertical-alignmentplaceholder

Angular4 validation for the full name input field is not functioning correctly as anticipated

I am currently working on creating a custom validator for a full name input field in an Angular 4 register form, but I am encountering some issues. The validator is displaying the "Only letters and spaces allowed" message even when the input only contains ...

htmlangulartypescript

Troubleshooting number positioning problems on Joomla website across different browsers

Recently, I encountered some issues on a Joomla website that I constructed using Joomla 3.5.1. I have utilized CSS to ensure the responsiveness of the site, which is functioning perfectly. The main issue arises with the header of the site displaying diffe ...

htmlcssgoogle-chromeinternet-explorerjoomla

I'm a bit torn between using images for text or utilizing Google Fonts

I am looking to use a unique font that is not commonly used. This font is available in Google Fonts as well as in Photoshop. I am unsure about which method to choose because both options involve some loading time. Although using images for text is not idea ...

htmlcssfonts

Guide on utilizing font-awesome icons stored in node-modules

After successfully installing font-awesome 4.0.3 icons through the npm install command, How can I incorporate them into an HTML file from the node-modules directory? If edits need to be made to the less file, do they have to be done within the node-modul ...

cssnode.jslessnpmfont-awesome

Struggling to adjust the width of a DIV based on browser size and content with CSS

I'm working with a div that contains several 210x210 pixel images, and I want to adjust its margin from the left side. The goal is for the right side of the div to be just a few pixels away from the images, which will have their own margin set. Strang ...

htmlcss

Making alterations to the content of a division using getElementById().innerHTML yields no difference

Recently, I've been working on a JS project inspired by a short story from my high school days. The story featured robot crabs living on a small island, and I wanted to create a simulator where players could set the initial parameters and watch as the ...

javascripthtmlcss2d-games

I'm having trouble pinpointing the origin of the gap at the top of my website, even after thoroughly reviewing all my tags

After setting margins and padding of 0 for both html and body, all my top-level elements inherited the same styling. I'm hoping to avoid using a hacky solution like adjusting the positioning. Any tips on how to achieve this without resorting to hacks ...

htmlcss

What is the best way to retrieve the object of the selected option from a single select input in Angular

I'm currently working with an array of objects that looks like this: let myArray = [{'id':1,'Name':"ABC"},{'id':2,'Name':"XYZ"}] I'm trying to retrieve object values based on a dropdown selection, but so ...

javascripthtmlangulartypescriptrxjs

The issue with the class attribute being disregarded by Internet Explorer

Having trouble with a complex web page (JavaScript application) where an included style sheet has the following rule: .floatleft { float: left; margin-right: 10px; } There is a DIV element within that layout: <div class="floatleft" width="25%"> ...

cssinternet-explorerinternet-explorer-9

Analyzing CPU Usage with PHP and Jquery Flot

How can I utilize this to its fullest potential? Is it possible to use a jQuery chart to display CPU usage? I'm considering using jQuery Flot. Is there a way to have the graphics update automatically? I would appreciate any tips you can provide. ...

phpjqueryhtmlajax

Stop specific words from being entered on a website

Is there a way to block a specific word from being saved in my database? For example, if I want to prevent the term 'fast car' from being stored, what kind of code should I implement using HTML, JavaScript, or PHP on my website? ...

javascriptphphtml

How to send an email using asp.net and html

This is the form on my index.aspx page. <form role="form" method="post" action="SendMail.aspx"> <div class="form-group"> <input type="text" class="form-control" id="name" name="name" placeholder="Name" required> </div> ...

htmlasp.net

Creating a stylish CSS button with split colors that run horizontally

Could you please provide some guidance on creating a button design similar to this one? I've made progress with the code shown below, but still need to make adjustments like changing the font. <!DOCTYPE html> <html> <head> <sty ...

javascripthtmlcss