0

I want to get this picture Click Here to look like the picture on this website Click Here. It looks cropped almost because it doesn't look scaled or anything, but I know it's not cropped because I got the image off of this website. So any ideas. I tried to look at inspect element... I couldn't really decipher it.

3
Contributors
6
Replies
23
Views
3 Years
Discussion Span
Last Post by Bensirpent07
1

its usually css positioning of a background image
you can select in css how big a box, and whee it is placed, to display an image bcakground

0

+1 for almostbob..

If i can add that may be helpful for you, just use the dev tools of your browser so you can inspect the elements of the page. here is how the site took care of that effect..

84a58ae75580ddc97e8c60bff2079f3e

0

Awesome!!! :D it works great... now do you know how to make that sort of dark overlay... to where it just looks darkened... I don't know how to do that either XD sorry I have never played with this kind of thing before so this is a pretty cool learning experience. Also I don't know if I'm just tired or something but I can't seem to get the <div> element snug to the sides... it has these little white spaces that look like this. Click Here

Here is the code if you want to take a look...

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Weblup</title>
    <link rel="stylesheet" type="text/css" href="css/home.css">
</head>

<body>
    <div class="header-background"></div>
</body>
</html>

CSS

div.header-background{
background-image: url(../images/Graph.jpg)!important;
background-repeat: no-repeat!important;
background-position: 50% 50% !important;
background-size: cover !important;
background-color: transparent !important;
background:inherit;
height: 500px;
width: 100%x;
}

Edited by Bensirpent07: Needed to add some more help problems.

0

An overlay is generally just a div with opacity style applied to it. If you wanted to overlay the entire screen you set the div to position fixed and ensure its width and height fits the screen or whatever area you want to cover. You also need include the z-index style to place the overlay above/between the target elements. With regards to the space, that appears to be caused by the default browser styles related to margin and/or padding. You may consider using a CSS Reset to apply a margin and padding of 0 to all target elements. Do a quick search on that and you'll find a few popular resets.

0

This is for anyone who had the space problem and was looking for a fix. This is the code I found to reset everything. Thanks everyone for all the help :D

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
0

Ok I have tried for a while now to figure out how to completely copy the top of this page Click Here but I haven't been able to do it. I do own this page and I can prove it, so I'm not doing anything wrong. It's just I'm still fresh learning HTML and I just could use some help.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.