i want to place a larger image than box on my site design (look at the link for image), its a part of my site design. i wants to use css method. iam now using dreaweaver and i want to code these image, please help me.
The size of white bg area is 737×323,(w×h) The size of yellow area is 275×323(w×h),
The size of fruit picture is 690×180. (w×h)
Image link
Here is something that should give you a starting point. The main trick is to use position:absolute. I recommend you read about what that means. Essentially, it lets you specify exact pixel coordinates of your page elements.
Note that the dimensions you give in your question are a little strange.You say the fruit picture is 690x180, for instance. But when I look at the image, it seems the fruit is basically square. Perhaps your image has a lot of transparent space? It is not clear without seeing the images themselves.
Also, on a real site you would probably want another nested <div> for the text itself, inside the yellow box.
Anyway, here is an example that just uses colored rectangles in the approximate arrangement your image shows:
<html>
<head>
<style type='text/css'>
.back {
position:absolute;
background-color:gray;
width:700px;
height:400px;
left:0;
top:0;
text-align:right; /* just to make the text readable in this example */
}
.text {
position:absolute;
background-color:yellow;
width:600px;
height:300px;
left:50px;
top:50px;
text-align:right; /* just to make the text readable in this example */
}
.fruit {
position:absolute;
background-color:red;
width:300px;
height:380px;
left:10;
top:10;
}
</style>
</head>
<body>
<div class='back'>the background</div>
<div class='text'>the yellow area</div>
<div class='fruit'>put the fruit image here</div>
</body>
</html>
There are many other ways to do it, of course, depending on how you cut up your images.
Related
I'm trying create an effect on a header image that will progressively blur and fade that image on scrolling down. I've tried to search online for a solution but I don't even know what to call it. I have found an example very close to what i'd like to achieve but I don't quite understand how they've done it either. My experiments have been a total flop and I was wondering if anyone could either point me in the right direction or at least let me know what something like this might be called so that I can search for a solution. Thanks for your time.
The example site is https://www.intertel.co.za/password-grabber
(You'll notice how the background image is almost black by the time the page content reaches the top of the screen - that's what I want)
I've included a snippet here so you can see my dismal attempt
.header-container {
position:relative;
top:0;
left:0;
width:100vw;
height:25vh;
overflow:hidden;
}
.header-image {
background-image:url(header-image.jpg);
background-size:cover;
background-repeat:no-repeat;
background-position:0 0;
background-attachment:fixed;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}
.header-overlay {
background-image:url(header-overlay.png);
background-size:cover;
background-repeat:no-repeat;
background-position:0 0;
position:fixed;
top:100%;
left:0;
width:100%;
height:100%;
margin-bottom:-25vw;
z-index:2;
overflow:hidden;
}
<div class="header-container">
<div class="header-image"></div>
<div class="header-overlay"></div>
</div>
I don't know if there is a solution in pure CSS but you should try using Javascript to create a function that modifies your div style when scrolling down.
What you are looking for are CSS Filters. With these, you can blur images, add/remove contrast and a lot more.
The link you have provided makes use of a blurred image that has been created beforehand. When you're at the top of the page it has an opacity of 0, which goes up to a max of 1 when you're scrolling down.
Their approach is less resource heavy, but not the ideal way, if you ask me. If you use CSS Filters, you will be able to give the same effect to every image you want without having to create a blurred out copy every time you want to use a new banner image.
The way you achieve the effect is fairly easy with JavaScript. I've created a Fiddle to demonstrate the effect. Of course you can do a lot more with this piece of code, like shifting the hue, removing contrast, etc.
Hope this helps
I'm trying to figure out how to make my homepage similar to my business card, seen here without the text: http://katiehambor.com/images/businesscardexample.png
I want the webpage to have this cropped circle to mimic my business card, and at almost any browser size the background image (diagonal stripes) will still be seen on the left and right.
Basically the top and bottom of the circle should be cropped and the left and right should be exposed so that the background image is shown (not shown on this codepen). I want it to be responsive so if someone makes their browser smaller, the circle will still be centered. I also do not want to be able to see the bottom of the circle, since right now if you scroll down you can see the bottom edge.
There will not be a lot of text in the circle, so there's no need to worry that all the text will fit inside.
I also want this site to be responsive so that for horizontal screens it will look like this, but on vertical screens the whole circle will probably be shown. I don't need to figure this out though because I know how to see the full circle, as my problem is with cropping the circle, but it's just something to keep in mind.
Also there will be a text div within the circle—right now it just says 'text' and I made it transparent for reference. I know this might need more divs to accomplish, but I don't really know where to go from here.
Please let me know if there's anything I can clear up about my question—sorry if it seems confusing!
Edit: Below is my first try, but it has been changed so it can now be seen here.
/*original on: http://codepen.io/mezzotessitura/pen/kfenK */
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Katie Hambor</title>
<style>
body {
text-align: center;
background-image:url(images/background.jpg);
background-size: auto;
color: black;
}
.box {
background-color:#00a886;
padding:5px;
top:-10%;bottom:0;left:15%;right:15%;
width:55em;
height:55em;
position:absolute;
border-radius:50%;
}
.textbox {
height:auto;
margin:5em;
position:absolute;
top:0;bottom:0;left:0;right:0;
background-color:#fff;
opacity:.25;
}
</style>
</head>
<body>
<div class="box">
<div class="textbox">
<p>text</p>
</div>
</div>
</body>
</html>
try background-size:cover on the body. but I would make it cross browser friendly.
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
This should work better for you. http://codepen.io/anon/pen/utkbF
Using css to create the circle:
.box{
border-radius: 50%;
background-color:#00a886;
margin: auto;
}
I received an answer on Reddit here.
Uses vw to accomplish the responsive aspect. And transform for centering it (from this css-tricks article). I used position: absolute instead of fixed, but both do the same job in this case because div.box is positioned relative to the body.
I've been working on this for hours, and reading over 20 articles and I still have no idea how to do this. I have a background, in which I want text to be positioned in a certain place. Everything is fine until I view it on a monitor with a larger resolution. The background re-sizes fine, but the text is no longer in the place I want it to be.
These images hopefully will clearly describe my situation.
How I want the text to look at any resolution (this is on a 1440 x 900 monitor) http://dl.dropbox.com/u/9134840/demo/1.PNG
This is how it looks on a 1080p Monitor:
http://dl.dropbox.com/u/9134840/demo/2.PNG
<body>
<div id="blah">
<p id="pr">This is a paragraph!</p>
</div>
</body>
</html>
body {background-image:url(back.jpg); background-size:cover;}
#blah{font-size:large; left:300px; top:200px; position:absolute;}
edit: I tried both suggestions, using divs and positioning the text absolutely and relatively and still a no go, the text still moves.
#contain{
position:relative;
width:7000px;
margin:0 auto;}
#blah{font-size:large; left:100px; top:200px; position:absolute;}
I'm not looking for a fixed positioning, because I'm going to be adding content so I need to scroll vertically through the page without the text moving.
Your #blah div needs to be positioned inside a relative div. You might have problems with that if you absolutely positioning something in relation to the body. Place it inside another div or use fixed positioning.
#containerDiv {position:relative;}
#blah {position: absolute; top:200px; left:300px;}
<div id="containerDiv "><div id="blah"></div></div>
Or
#blah {position: fixed; top:200px; left:300px;}
In this case your div will always remain the same place if you resize the window. If you want it to be centered, use something like:
#containerDiv {position:relative; width:700px; margin:0 auto;}
#blah {position: absolute; top:200px; left:300px;}
Also bare in mind that background-size:cover; will not work in versions of IE.
Examples:
http://jsfiddle.net/mYcXX/1/ (absolute) vs http://jsfiddle.net/mYcXX/2/ (fixed)
This looks like fixed layout.
If so why just not cut the central part of the background and put it in a div with style:
{
width:960px; // maybe more or less - the width of the central image
margin-left:auto;
margin-right:auto
}
And position the paragraph relating to that container (the div)
I believe you can solve this problem by separating the background image style from your container. I could be wrong, but try something like this...
body{
background: url(black.png) top center no-repeat;
}
#container{
width: 960px;
margin: 0 auto;
}
I would recommend relying on the natural flow of the dom as much as possible. Basically, don't ever rely on position: absolute unless ABSOLUTELY necessary. And even then its probably a hack.
Okay, I figured it out myself, big thanks to yisela for the guidance. Ultimately though, here's what I did. I looked at a site, like yahoo.com and saw that they had everything centered and had a white background. So no matter what resolution you had, it will still look neat. With that in mind, I made sure my image was gray, and change the background to gray so it all blended in.
Now, as for the container stuff. I placed the image in a container by itself, and centered it. Then I just set the paragraph relative to the container. That way the text will stay in the same position.
html{ background-color:gray }
body{ }
#contain{
width:1280px;
height:2000px;
margin-left:auto;
margin-right:auto;
background-size:cover;
background: url(back6.png);
}
#blah{font-size:large; left:120px; top:230px; position:relative;}
<div id="blah">
<p id="pr">This is a paragraph!</p>
</div>
</div>
</body>
</html>
And now..I think I'll happily go back to c#, after this wonderful experience with CSS.
So, I have this wonderful image here:
And what it is is a header for a website - click it to view it full size..
I need to re-create this using HTML/CSS/images and I can't figure out how. It has to be 100% width yet, the point where the gradient turns from one type to the other, has to remain in the same place on resize. To illustrate:
The area that is not blacked out must stay in the center of the page at all times and not move. The areas in black must extend to 100% of the screen width and have a tiled background gradient.
How can this be done?
I have tried something like this:
Where green is a div with a fixed width and centered yellow is the 'twirl' gradient bit and then red/blue are the tiling gradients. But this does not work because the tiling gradients to not match the position of the 'twirl' when the browser is resized.
Note: This must support IE7+ and must be cross-browser compatible and preferably uses no javascript.
I’m not sure why do you actually want to make this so hard by cutting the image up into pieces?
Take the image, extend the canvas to let’s say 5000px and just repeat the gradients to both sides. You’ll maybe add about 200 bytes (yes, bytes, not kilobytes) to the image size, but you’ll make it all up without adding 2 more requests for the separate backgrounds to the page.
And then just set the image to background-position: center top;
And as the center DIV is fixed width, you can either add a container to have the background or add the background to BODY for example.
Well, I think I've managed to do it..
<header>
<div id="bg-left"></div>
<div id="bg-right"></div>
<div id="header-content">
My header contents
</div>
</header>
And
header {
height:88px;
}
header #header-content {
width:1004px;
height:88px;
position:absolute;
left:50%;
margin-left:-502px;
background-image:url("/img/header-bg-middle.png");
}
header #bg-left, header #bg-right {
position:absolute;
height:88px;
}
header #bg-left {
background-image:url("/img/header-bg-left.png");
width:50%;
}
header #bg-right {
width:50%;
background-image:url("/img/header-bg-right.png");
right:0px;
}
So basically, I am creating a fixed width div in the center of the page, and then behind that I create two 50% width divs that have the appropriate gradient background.
Id do the same thing as you started doing with the one 'twirl' being centered, with two divs on the outside... the way I would do this is like this:
this is what i have:
<div style="width:100%">
<div style="background:#333; position:absolute; left:50%; top:0; width:50px; margin:auto; height:50px; z-index:10;">
</div>
<div style="width:50%; position:absolute; left:0; top:0; background-color:#060; height:50px; margin:0; z-index:1">
</div>
<div style="width:50%; position:absolute; right:0; top:0; background-color:#060; height:50px; margin:0; z-index:2">
</div>
</div>
</div>
which can be viewed here: http://sunnahspace.com/TEST.php
basically you have a container div, which if you decide to move this around at all id make relative positioned. then youd take the piece where the gradients change and make that your 1st inner div, with the different gradients your 2nd and 3rd div. Basically, the 1st div (the "twist") is positioned to stay in the same place of the browser (the middle, see the 50%, but this can be set to say 200px from the right, etc.) with the other two divs expanding when browser window sizes change. The z-index layers the css, so the 1st one having a z-index of 10 is on top (the number hardly matters so long as it is the highest number, but leaving it like this allows you to add more layers underneath without having to change the z-index, with the other two having z-indexes of 1 and 2, doesnt matter which order so long as they are less than the top div, this lets the first div sit on top of these two divs, hiding where they meet. Should work, let me know how it goes, and if need be ill fix a few things.
Is this what you want to do? http://jsfiddle.net/nnZRQ/1/
Here is my issue--I need to somehow access the onclick of an item that is covered by another element of higher z-index. I know this is going against the point of z-index, but any ideas?
In the below example, only the small top-sliver of the red box is clickable. I have a webpage design where tabs that need to be clickable are overlaid by an artsy bar... I'd love if there were a way (maybe some javascript trick?) to use onclick for these obscured, lower z-index elements without changing any positioning, though my gut feeling isn't good.
<html>
<head>
<style type="text/css">
#bg {
position:absolute;
width:500px;
height:500px;
background:pink;
}
#under {
cursor:pointer;
margin-top:-10px;
background:red;
width:50px;
height:50px;
z-index:0;
}
#over {
position:absolute;
width:900px;
height:50px;
margin-top:10px;
z-index:100;
}
</style>
</head>
<body>
<div id="bg">
<div id="under" onclick="alert('hi');">aaa</div>
</div>
<div id="over"></div>
</body>
I would do it with a transparent PNG inside a DIV above the artsy bar with the same dimensions as your clickable lowest z-index DIV.
Be aware of Internet Explorer Issues.
I used the technique many times.
The usual replacement method is to place the "over" elements (positioned absolutely) inside the "under" elements (positioned either relatively or absolutely) and make the content the same size (Gilder/Levin Image Replacement).