So I have tried to get rid of this white space to the right of my website for ages now. I've tried all the overflow-x: hidden rules but none of them seem to work.
I have ruled it down to when I remove:
(div id="content5" style="position:absolute;")
(img style="width:175px; height:175px;" src="Images/Graphic.jpg")
(/div)
from the html file then the white space goes away. How do I put the picture on my web page without getting the white space? Don't worry I am using angle brackets for my html.
You can view my website here.
CSS:
view code here
HTML:
view code here
Make the width of the #content5 element set to the pixel width of the image:
#content5 {
width:175px;
}
Right now, the width is set to 50%. But that essentially sets it to 50% of the width of the parent element, which is the whole page. If you look in the inspector, the divs containing all of your images are much larger than they need to be because of this.
EDIT: Included inspector image of Chrome session
#Daniel Ravens if you insert the following code it should fix your problem:
html {
background: url(Images/FrontCover.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This code basically stretches everything on the page to make it fit I got this code from the following site:
CSS Tricks
Related
I have made a background image, 1366px wide and 768px high, which I want to use as background for the main page of my website.
I have each page of my website divided in sections, using the FullPage plugin.
This is the main page so I'm using just the first section.
What I've tried so far is adding this CSS code to the #first section of my main page:
#first{
width: 500px;
height: 500px;
background-image: url(images/ClanshnowXmasEventSmall.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Unfortunately the image gets displayed just partially. In fact it's a little shorter than it actually is.
I read the documentation for the background-size attribute, and at the cover attribute it says:
Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
So basically how can I make my background-image fit the screen size? Considering the mobile side I think it would be better to fit just the width of it. I'm open for suggestions and help!
Take a look over here: https://www.google.be/amp/s/css-tricks.com/perfect-full-page-background-image/amp/?client=safari
Good luck!
I have a design that I'm converting to be Bootstrap responsive but have run into a couple of problems.
How to make a non full width background image responsive
How to keep the main form content the correct distance away from the top of the image no matter what the viewport size.
Mock up image
Website
I'd be very grateful for any pointers
The following is one simple option, according to your mockup-Website.
Create a parent DIV that is center aligned on the page.
Apply a background image to this DIV and set its max-width to 100%.
Create another div that will sit on top of the parent DIV (and is relative to the parent DIV).
Give its top margin the required %.
It is recommended that you create these styles on media queries for responsive display.
There are a lot of StackOverflow topics the will help you through with the above steps.
HTH.
To fix problem 1: on the body you can use: background-size:contain;
First, for the background image:
div.someclass{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This will make your background image responsive, i.e. it will fit according to the size of the display the page is viewed on.
Second, to keep the main form content a proper margin from above on any device is to give the div you just created for the main content a relative margin on top:
div.someclass{
margin-top:5%;
}
change the above 5% according to your requirement.
I have a problem with html and css.
Today, for the first time, I've tried to make a page with a big image for the background.
I'm using foundation framework, and I'm stuck on one thing. As we know foundation is a adaptive framework and when I re-size my browser, I've got a bug.
You can see it on my screenshot: https://imgurhd.ru/i/270a.jpg (also here you can find my css).
I need to make the text and image under menu vertically centered on any screen size.
I'm using position relative with a percent value, as you can see. So please help me to find where is the problem.
You can set the background size to cover.
Cover
This keyword specifies that the background image should be scaled to be
as small as possible while ensuring both its dimensions are greater than or
equal to the corresponding dimensions of the background positioning area.
html {
background: url(/*YOUR IMAGE HERE*/) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This is supported in most recent browsers
So I am having just a small issue with a site that I am modifying for a client: http://gator3094.hostgator.com/~sunhome/staging/.
As you can see, the background image that I am putting around the <header></header> tags is not stretching the full height of the div.
Here is a link to my CSS file (everything else is just stock Foundation Framework): http://gator3094.hostgator.com/~sunhome/staging/wp-content/themes/sunpower_theme_sunsolar/library/css/custom.css
Here is also the CSS code that I am using for that particular section of the site:
header {
background: url('http://gator3094.hostgator.com/~sunhome/staging/wp-content/uploads/home-bg2.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I have done these full-width cover backgrounds with CSS3 a million times, but I have absolutely no idea why this time the image won't cover the entirety of that div.
Hopefully it's just a super simple fix. I would really appreciate any and all help.
Your issue is because of the lack of appropriate cropping of your background image.
Try this with your header tag:
header { background: black;}
You'll see that the background takes up the appropriate dimensions of the div. The reason white space is showing is because your background image has a lot of extra transparent space around the image. So the background is repeating appropriately, you just need to crop it so it will show the part of image you want.
Still dont belive me?
Try replacing it with this:
header { background: url("http://placekitten.com/1800/950");}
On this page I have 2 background images:
(1) A blue sunburst that is set as a background image of <html>
html {
background: url("BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg") no-repeat fixed center center / 100% auto transparent;
outline: 0 none !important;
}
(2) An image showing a crowd of arms in the air that appears at the bottom of every page. I use the sticky footer solution to make this stick to the bottom of each page
Everything works fine at normal browser widths, but once the browser width is below about 500px a white space starts appearing at the top:
and at the bottom
of every page. Previously I used
background-size: cover;
for the sunburst image, but this caused the website to crash the browser on iOS 6 (seriously), so I need to find a way to fix this without using this rule.
The white space is due to the browser positioning the image center center as defined in the CSS.
html {
background: url(BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg) no-repeat center center fixed;
background-size: 100%;
outline: 0!important;
}
I thought the solution would be just setting background-size: 100% 100% as the current setting of just background-size: 100%; is 100% width and auto height. But it's bugged in Chrome - background-size:100% 100%; doesn't work properly in Chrome. There is a workaround answer on that question that might help.
However, if the background-size: 100%; is dropped for width < 500px, perhaps in one of your #media rules, then the background fills the page as expected. The rule is still required when the window is greater than the width of the image to stretch the image.
If you're not opposed to a JS solution, you could try using Backstretch.
Set the background-size to something larger than 100%. I think 200-250% will cover that area.
background-size:220%;
One side effect this has is the fact that it causes slight lag due to the size.
Here, Have this solution...
In this file...
http://festivals.ie/static/C5z61WeZeCfyTRbmu6lNPsxXxwhibmxExq6ADwtSPjh.css
On line no 793,
this code is there in the last part of that line...
html{background:url(BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg) no-repeat center center fixed;
background-size:100%;
outline:0!important;}
Add this property : background-position: 0px 0px;
Making the code:
html{background:url(BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg) no-repeat center center fixed;
background-size:100%;
outline:0!important;
background-position: 0px 0px;}
And fyi, as andyb pointed out the white space is the image leaving its top position to be centered, thereby making it look like a white space starting to appear..
Hope you get the point.
Regards