I'm currently working on a hobby website, and I'm trying to accomplish something which seems way more advanced that it should be, I hope you can help me.
I wish to bring a background element, du the foreground (Because a little bit of it should reach on top of the menu line)
I am using the CSS3 multiple background method, to use 3 different background elements. I have included the code and an image to show what I man.
Cheers
background-image:url(logo.png), url(shinybg.png), url(bgpat.jpg);
background-repeat:no-repeat, no-repeat, repeat;
background-position:top center, top 18px center, top left;
height:1000px;
padding-top:10px;
z-index:-1
Image: http://goo.gl/JEvhAz
EDIT:
Okay so it seems I fixed it. I made the img tag outside of my wrapper and made it position absolute, the way to center it was as follow:
#logotop {
width: 905px;
margin: 0 auto;
margin-top:-18px;
position:absolute;
left:0;
right:0;
}
The left and right 0 together with the margin 0 auto fixed it, cheers lads
Put your header image/logo into a new <img> tag that is placed on top of your page. This will give you much more control over positioning than what you're currently doing, and will allow you to use z-index.
If you're comfortable with HTML/CSS, I'd recommend creating a header <div> and set the background on that div (and also the z-index). This will allow you more options further down the line but the simpler option is to use the <img> tag.
Here is a jsFiddle with some examples that might help you: http://jsfiddle.net/tMhs7/1/
Related
I am struggling to position an image that I am using as the background as auto. I also have an article tag that will not centre.
How do I fix the issue with the following code?
body {
background:url('index1.jpg')no-repeat;
width:auto;
}
Try this:
body {
background: url('index1.jpg') no-repeat center center;
background-size: cover;
}
This should center your background image and resize it accordingly. Hope this helps.
EDIT (Pertaining to your comment):
First off, in order to obtain a border on an element you use the border, not border-radius. border-radius will round the edges of an element rather than add a border itself.
In order to center objects you need to use margin: auto;. This will place the content in the center of its parent container.
Here is a fiddle of the working code: JS Fiddle
In the future please attempt to do a little research and figure things out on your own. All of these solutions could be found on existing questions on SO.
I'm wondering if this is possible, the ability to set the background position of an image to the top left of the html document, not the top left of the element it's the background of.
Psuedo-code
body {
background-image: url(someurlhere);
background-position: top left;
}
element {
background-image: url(sameurlhere);
background-position: top left /*Relative to body not element*/;
}
If I need to provide anything else to this question let me know and I'll amend it, but I'm sure it's pretty straight forward.
Edit: I can't use absolute positioning, I'm loading dynamic content and I want a tiled image to fit the background of several elements to make the illusion of holes in the page.
Edit 2: Here are some pictures to better explain the problem.
Picture 1: Notice the repeated pattern in the header elements. http://i.imgur.com/3lWguRE.png
Picture 2:This variation is what I aim to achieve. http://i.imgur.com/WtOeCQ2.png
The first question would be why you are not just setting the background image on the body element.
But if that's not appropriate, you have the option to set a background image on an element to fixed, in which case it will be fixed to the top left of the browser window and won't scroll.
element {background: url(image.fig) repeat fixed;}
However, the background will only show on the element it's attached to, even though it starts at the top left corner of the screen. (This is handy for parallax effects.)
EDIT: As a side note, if you are using the longhand background properties, fixed is set with
background-attachment: fixed;
All you have to do is wrap your element in a div absolute, and position it as you wish.
Can you provide some more information on the context of the element? Does it have any positioning set? Where is it in the document? It's a little unclear to me what exactly you are trying to accomplish.
Would putting the background on the body work?
This would set the background at the top left, but I doubt this is actually what you are trying to accomplish:
<div class="test">
</div>
.test:before {
content: "";
position: absolute;
top: 0;
left: 0;
background: url(http://i1112.photobucket.com/albums/k497/animalsbeingdicks/abd-318.gif);
width: 352px;
height: 263px;
}
http://jsbin.com/imurah/1/
I want to make a header like http://www.chacha.com (doesn't move, is about that wide and that height, and able to fit divs inside it and also has to be an image)
I am starting off with a blank html document and a blank css page, so there I haven't currently written any code.
I've been trying two days straight to do this now so I would really appreciate any help anyone can provide.
I have gimp so if anyone could also give me image dimensions for a perfect header and perfect background size I would appreciate it even more.
CSS:
#header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 10px;
background: url(yourimage.png) repeat-x;
}
<!--html -->
<div id="header"></div>
That should give you a starting place, I can't tell you more without seeing exactly what the layout's supposed to be.
The CSS property you're looking for is position: fixed which will position the element relative to the viewport. This is good breakdown of positioning: https://developer.mozilla.org/en-US/docs/CSS/position
In this specific case, what you've got is an element with styles roughly along these lines:
#header_id {
position: fixed;
width: 100%;
height: 35px;
}
You don't have to set the height, but unless there is content in the fixed element, it will collapse if there is no height specified. They also appear to have put a drop-shadow on the element toget the neat floating effect.
If you want to have an image inside, you can just put the <img> inside the header element, or use it as the background-image url in the CSS and position it with background-position (see also: https://developer.mozilla.org/en-US/docs/CSS/background-position although the compatability table at the bottom is important if you want to do anything too specific with this property).
You can do this with any block-level element (or any element with display:block set on it). In your example they are using the HTML5 <header> tag; a <div> would work, too, if <header> wasn't appropriate for your page.
I would recommend using the Firebug addon with Firefox (or similar developer consoles with other modern browsers) -- you can right click on an element on the page and select 'Inspect element' from the dropdown menu and get a breakdown of both the markup and styling to see how other websites are constructed. Very useful for when you're browsing the internet and you see something and think, 'that's a neat trick, how does it work?'
FOR FULL WIDTH FIXED HEADER
header {
width:100%;
background:green;
height:60px;
margin:-8px;
position:fixed;
}
FOR NONFULL WIDTH FIXED HEADER
Create a div and set width and height (you can also set it left or right by float:left, float:right)
then in this div put the code above but without margin:-8px; and change the width to the width that your div has.
Here is a test
i want to get the bit at the top of some websites that really thin and right at the top. which looks like facebooks blue banner at the top of their website.
the code i have tried for the above is:
<div style="height:20px; background-color:grey; margin-top:-10px; "></div>
and it works apart from theres just a little bit of white space at the right and left sides of the grey.
Does anyone know what i am doing wrong?
It sounds like you haven't cleared the padding/margin on the body element. Give this a go:
html, body
{
padding: 0px;
margin: 0px;
width: 100%;
}
Also, give your div a width of 100%:
div
{
width: 100%;
}
I've probably gone a bit overboard with the CSS, but it will make sure everything works.
Additionally, make sure there is an HTML doctype defined - this can cause some other problems later one, such as :hover not working.
You need to use margin:0 on the html and body tags. This will allow your div to take up all the available horizontal space, and put it right at the top instead of having a small space.
I want to place a PNG with some transparency (a white column) over a tiled background on a webpage. It should stretch/tile out vertically (not horizontally) over the whole page. I'm just using CSS and HTML. I'm guessing my understanding of DIV's and CSS is lacking, for which I apologize.
Here's what I have, as a result of a lot of fiddling:
body {
background-image:url(bin/back.png);
background-position:left bottom;
}
#second-background {
position:absolute;
height:100%;
top:0;
margin: auto;
background-image: url(bin/column.png);
background-repeat: repeat-y ;
}
It's being displayed but I can't get it centered and on top of that it displaces the rest of my content. I've read through how-to-recreate-silverbacks-parallax-effect on thinkvitamin, but I can't get it to work myself.
Here's a link to a demo where you can see it in action.
I believe that you need to set a fixed width on #second-background. Otherwise, with no content in it, it has no width.
Edit: I'm sorry, I didn't read your question thoroughly. Let me check out the demo and investigate further.
Edit 2: Ok, if you want the white column image over the whole page and centered, then you'll need to set #second-background to width: 100%; and background-position: center top;. This will also allow #inner-body to center correctly.
Let me know if this isn't what you were going for.
I'm making a few assumptions here, but I think it'll work out:
Firstly, add this to near the top of your CSS:
html, body {
margin:0; padding:0; border:0
}
On #second-background, add width: 100%.
On #second background, either add background-position: center top, or scrap all of your background- properties and replace them with this: background: url(bin/column.png) repeat-y center top.
Tested in Firefox, with Firebug.
If you would like me to explain why these changes work, just ask.