i've been trying to find the name of this but i have no clue on how is this called and made.I have been coding a html website and i wanted to do some experimenting with the background that there is Content on a white background(the white background is small just to cover the content not a main background) and behind it, is the background image. Check steam profile backgrounds everything is on the blue/black background and the games bgs are behind.
Sorry for my bad english.
I think to have understood your questione, in css make the body, or a background DIV height and width :100% than set the background-image: imagepath;
Now your should have the background.
than create a div, in CSS make it position: relative; height and width the size do your preferenze than to have it centered use matgin:auto; and to have only the background of the div look semi trasparente use a background-color:rgba(255,255,255,0.8)
I hope to have answered your question.
PS if your need to get started try Code accademy.
Related
I'm working on a website for a friend of mine. There's only one problem. The slider won't fit in the frame without stretching.
I've set it to 100% height, but it won't work out. (Its also responsive)
I want it to be a nice image in the original width and height (100x100, 200x200 etc) without stretching (200x500).
I hope you guys can help me out on this.
I'd tried alot and also asked some other people but they can't help me with this.
You can see the slider over here.
http://tinyurl.com/p36hz6u
Here's another version of the slider, but on this version the slider image gets cut off
http://tinyurl.com/nfjjvwu
If the images are background images, consider using the background-size:contain; which will allow the image to grow as large as visible/possible without stretching, and then you can position the background image wherever desired with background-position
If the slides have actual physical <img /> tags, I made a JSfiddle that demonstrates code that will contain an image within an element. In this example, the <div> tags represent a browser window and can be resized: http://jsfiddle.net/dds27w2y/
Firstly what I would do is to remove the: background-size: 100% 100% and add a background-position: center center.
Then I would add a background-color: white to the container. This would make it look nicer and it would be centered.
I'm creating a webpage but I am having some problems with responsiveness.
Right under my logo, there is a large image. (1000 by 550 px) Over that image, I want to place a menu - and I think I've worked that out with position: absolute. However, I want to use an introduction text, and I cant figure out how to do that.
Could I just use a TextBox with absolute and z-index? Otherwise, how can I add the image as a background image and make it responsive?
background-size: 100%;
That would make your background image responsive. But only if the container itself is responisve though. A more exact answer would require a fiddle or at least some html and css.
I have a a background image on my html with css page, from blue at the top, to white at the bottom.
However, the image 400x800 and the page is much longer, so it repeats.
The page length varies all the time.
Is it possible to solve this so the background stretches to the page length somehow? or maye make it not repeat and make the background white with the image on top?
If yes, how please?
The easiest is to set the image to not repeat and then set the background color the same as one end of the gradient:
body {
background: white url('yourImage') repeat-x top left;
}
Getting a gradient to stretch to fit the window is doable, but is more work and would require some javascript.
I know that there are jQuery / Javascript methods of accomplishing this:
Resizable Backgrounds with jQuery
Stretch background image - jQuery - Demo
but besides resorting to solutions like those - you could:
Select a pattern for your background that repeats (textures etc.)
Create a very long background image that could handle most navigation that your page
would deal with.
Another alternative is to make your gradient the same at both ends with the maximum colour difference at the 50% mark.
Right now im using one large centered image in my body tag.
First image is basically what the front page is going to be like. Looks great.
Second image has some content and pushes down the footer and the whole page. But still looks fine.
This last image has a lot of content and pushes everything down, even past the height of the body background image.
So my idea is too split up the background at the change of colour you see in the first image, where the footer starts, and add that as a background for the Footer DIV.
But the issue is that that part of the background goes on past the browser in the first image. If I were to put the BG in my footer DIV it would have to be 500px in height, resulting in scrollbars.
Essentially I want to put the the lower part of the background in my Footer DIV and have it act like the BODY, in that it won't create scrollbars.
I think that was clearer than my previous explanation? It's hard to explain!
So in the first screenshot the background is one big image?
Yes, you need to split the background up.
Now lets assume these things:
1.) You've set the background color of the body to black (and that black bar that is showing is the body background and not a part of the image.)
2.) You have split the image up so the bottom half is the background image on the footer div.
You can eliminate the black bar by making sure there are no margins pushing the footer div away from browser window, and making sure any default margins created by the browser itself are reset. (i.e. body { margin: 0;}) However, the bar can still show up in other browsers (usually Safari). One solution would be to set the background of the <body> tag to the same as the footer tag. This only really works with repeatable images though.
I'd say your best bet would be to fade the bottom of the image to black like you've done at the edges.
You can use background: scroll; to make the content scroll over the background, but viewed at different resolutions you could still see the bottom of the image.
i have a div that is 90x110 how do i restrict the background image i need to use to this size? background image is 120x100?
While the background image will be cropped to the size of your div automatically, in case there's any other content that doesn't stay in, you can always set overflow to hidden in your CSS:
overflow:hidden;
You can also resize your background images, if there's a need. Please have a look at this and this to see how it can be achieved (there are multiple ways).
Oh, you may also want to have a look at a similar SO question posted a few hours ago.
The div will not grow larger, the only portion of the background image that will be visible will be a 90x110 rectangle.