This isn't exactly about making background images in CSS for a site, so don't mark it as a duplicate just yet.
I need to replicate the following background, but in CSS. I have a variety of gradients implemented on the site but this is more like a darkening around the edges of the screen, and I don't know how to implement this, particularly in CSS. If there's a good way to do this with images please let me know.
Thanks!
You can try inset box-shadow http://jsfiddle.net/46JxH/
box-shadow:inset -70px 0 200px -30px rgba(0,0,0,.75);
Or background image with background-size:100% 100%;.
If you will be using images, you can try CSS3 background-size:cover
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
Related
Was curious how you make image text kind of like this
https://dribbble.com/shots/2150115-Alltracks/attachments/393908
There are several ways to approach this. You could set a background image across the page in CSS3, for example, which would look 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 may also want to see Clipping and Masking in CSS. (left in comments by nzkks)
On a website where a non-tileable background image is used, what is the best way to make this look good across all devices/all zooms?
The CSS is
background: #aaa url(//url);
So a background colour is used where the image ends.
My initial thoughts are to give the background image a size of 100%, so regardless of the zoom or the viewport size, the background image will never be lose quality.
Is this a good way to do it or is there another, better way to manage background images in responsive design?
Thanks
I recommend 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;
}
Source: CSS-Tricks: Perfect Full Page Background Image
I'm trying to get my background image to stretch across the entire page, but so far i have this:
This is the picture i want stretched across the browser window:
My external CSS contains the code below:
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("mybackground.jpg")}
Can anyone tell me how I can edit the CSS file to fix my problem?
You can use:
background-size: cover;
However please bear in mind which browsers this supports. For example, this won't work in IE8 and below.
Another option would also include:
body{
background-image:url("mybackground.jpg")
background-size:contain;
background-repeat:no-repeat;
}
Use background-size: cover. Note its browser support.
MDN documentation.
Background size will do the trick:
body {
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;
}
Check this out for more info:
http://css-tricks.com/perfect-full-page-background-image/
You need to make this an <img> tag, with a low z-index, with position: fixed and then for the <img> tag, use height: 100%; width: auto or the opposite.
This method is cross-compatible for all browsers.
Have you tried using
background-size: 10px 10px
Change 10 to the width and height of the body
You can also do
background-size: 100%
Right now when you go to this link:http://rawgallery.us/user/login
the background is cut off. It should look like this picture no matter the resolution of the browser window: http://rawgallery.us/CarlisleBackDropWallRoom.png
I am still learning CSS, so I used this code that was suppose to cover the background everywhere, which works :
html {
background: url("CarlisleBackDropWallRoom.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
my #page is setup like this:
#page {
margin-left: auto;
margin-right: auto;
min-height:960px;
min-width:960px;
max-height:1200px;
max-width:1200px;
}
Does the html tag override the page tag?
Can someone tell me how I can view the whole background image if the browser window is 500x700 or 1200x1500 for example?
Thanks!
You may prefer background-size:contain, which fits the background image into its container rather than attempting to cover both width and height of the container.
From the MDN docs:
["contain"] specifies that the background image should be scaled to be
as large as possible while ensuring both its dimensions are less than
or equal to the corresponding dimensions of the background positioning
area.
Here's the CSS:
html {
background: url("/sites/default/files/imgs/CarlisleBackDropWallRoom.png") no-repeat center center fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
Here is a working example.
Please note the browser compatibility of 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.