See the background here:
http://www.achingsoul.co.uk/gallery/
It's applied to the body element and correctly-sized. But when you look at it here:
http://www.achingsoul.co.uk/services/
It's stretched out and very strange-looking. I'm not sure what it is as the CSS for it is the same on both pages according to inspector:
body {
background-image: url('images/aching-soul-background-2.jpg');
color: #4a2f1f;
background-size: cover;
}
Not sure what it is I'm doing wrong?
Remove the background-size: cover;
Your background won't stretch anymore, instead, it will repeat vertically.
The difference between both pages is caused by the greater height in the services page, when you use the cover value for the background-size property, it will cause this effect.
Try background-position:50% 50%;
and also
`/* FOR A LARGE-SINGLE IMAGE TO STRETCH COMFORTABLY ACROSS A BODY*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
zoom:1;`
Related
This is where my image is located.
I already tried several options shown on the picture, I have my css on my html (training purposes ) C:\Users\developer\Desktop\HTML Folder2
the following is taken form https://css-tricks.com
We can do this purely through CSS thanks to the background-size property now in CSS3. We'll use the html element (better than body as it's always at least the height of the browser window). We set a fixed and centered background on it, then adjust it's size using background-size set to the cover keyword.
html {
background: url(http://enjoycss.com/webshots/hB_1.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
https://css-tricks.com/perfect-full-page-background-image/
body {
background: url(HTML Folder2/image.jpg)no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
Do anyone has similar experience and has the solution?
I use below CSS to display an background image on a mobile, of course I do declare
I could not able to display the image according to screen's height and width, if I remove the "background-attachment: fixed", then image is resized according to the screen's height and width but image is center according to the length of web content instead of the screen.
Do anyone have better solution?
#home {
background: url('../images/hkfmpt_trans.png');
background-repeat:no-repeat;
background-position:center;
background-attachment: fixed;
background-size: contain;
}
try this
html {
background: url('../images/hkfmpt_trans.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I have a problem with a background image I have when trying to stretch across the entire window. external CSS below:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("mybackground.jpg"); -webkit-background-size: cover; background-repeat: no-repeat; background-size: 70%;}
#font-face /* support for browsers & IE v10 onwards*/
{
font-family:homefont; src: url("font3.ttf");
}
#main
{
position:absolute;
left:450px;
top:30px;
font-family: homefont;
font-size:150px;
line-height:70%;
}
This is what I have (see white space to the right of the image on the browser window):
Can anyone advise me on how to stretch the image across the entire window?
I have tried the suggestions as advised in the comments, however - the image appears to be cut from my knees downward :(. Are there any other suggestions?
Here is an axcellecnt article about your problem on css-tricks
Awesome, Easy, Progressive CSS3 Way:
html {
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;
}
You can try this
background-size: 100%;
or
background-size:cover
Here you go:
html {
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;
}
Works in:
Safari 3+
Chrome
IE 9+
Opera 10+ (Opera 9.5 supported background-size but not the keywords)
Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
top center;background-size-110%;background-repeat- no-repeat
Please increase the size as you like.
Scale the background image to be as large as possible
You need to use the background-size property with the value cover like below
body {
background-image: url("mybackground.jpg");
background-repeat: no-repeat;
background-size: cover;
}
Source
I have used twitter bootstrap to make a webpage.
I have inserted an image in background through CSS as following.
<div class="container-fluid">
<div class="row-fluid">
<section id="wrapper">
</section>
</div>
</div>
CSS is as follows:
section#wrapper{
max-width:700px;
background-image:url("img/crane.png");
min-height:525px;
}
When I resize browser size the image is not getting resized according to screen size.
I am not getting how to make it responsive.
So please can any one help me out to resolve this issue.
Thanks in advance.
Try this
section#wrapper{
background:url("img/crane.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You can use CSS3 background-size with cover as a value and not 100% property for a full page responsive background image for your website
html {
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
For more info
You should use the background-size property and set it to cover like in the following shorthand:
div.withBackground {
background: url('http://image.url/img.png') center center cover;
}
read more here
try this background-size:100%;
but not all browser works lower version of browser not recognize background-size
I'm working on a basic html page and I have this background image bg.jpg.
But the problem is depending on the screen size you have and how many pixels the screen has I'm not able to view the whole background image which is something I want.
How do I make the background fixed so you can see the whole background?
If you mean a full page background image than you can simply do it with CSS3 background-size property
body {
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
If you need to attach it, kinda fixed and shouldn't be scrolled, than use
background-attachment: fixed;
/* This is already used in above CSS declaration using CSS Short Hand*/
You can do something like this:
html {
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;
}
You can read more here: link
Delete your "body background image code" then paste this code:
html
{
background: url(../img/bg.jpg) no-repeat center center fixed #000;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You can use CSS pseudo selectors.
body:after
{
content: url(your_image)
/* Styling your image here just like a div */
}
Of course those other solutions are OK too, but they only work in latest modern browsers. This pseudo selection solution works in most browsers used today. If you'd like to support even older browsers, like ancient versions of IE, then you can use a div to contain the background image and style it as you'd like.