Auto adjust my background image size - html

I've been googling for awhile and none of the answers seem to match my need, need someone to help me with this, thanks.
my personal website is: http://simonykhsu.com for refrences
my code for the background image is
<div class="landing-header" style="background-image: url('skitrip_owlshead.jpg');">
i've tried implementing this background image code but i cant find the section in css file to make the background go skin color
<div id="image-container">
<img id="image" src="skitrip_owlshead.jpg" alt="middle"/>
</div>
and also the second code above doesnt seem to bring my image to the middle...

for centering the image and set backgroud color you can do this in the image-container div
<div id="image-container" style="text-align:center; background-color:#ccc;">
<img id="image" src="skitrip_owlshead.jpg" alt="middle"/>
</div>
#ccc is a sample color ... you set with your color code..

I'm sorry, but I don't really understand what it is that you're trying to accomplish.
Couple of heads-ups tho:
its better to create a seperate CSS file, instead of using inline-styling. Make a file called style.css and put your CSS in that. Put this in the <head> section of your website:
<link rel="stylesheet" href="style.css" type="text/css">
The alt="middle" is the alt-text. It's not used for styling
(centering) your image, but to describe your image. Something like
"skiteam owlshead team" should be good.
If you want to center the image and put 'skin color' right and left to it, put this in your style.css:
#image-container {
background-color: #FFFCF5;
}
#image-container img {
text-align:center;
}

Related

Is it an image file issue or size issue? HTML CSS background image question

I keep trying to use different images as a background but I am unlucky so far in figuring out if it is an issue with the photo file size or is there something wrong with the pictures i use? Asking since i tried with one image and the background image shows and works but any other picture that I want to use will not show up or work properly even though I have looked over my code multiple times and it is correct. Here is my current code
<!DOCTYPE html>
<html>
<head>
<title>Winston Berz</title>
<style>
body {
background-image: url("C:\Users\apere\OneDrive\Desktop\HTML Progress\Winston Berz\All Photos\img5.jpg") no-repeat center center fixed;
min-height: 100%;
background-size: 100%;
}
</style>
</head>
<body>
<div id="Navbar">
<nav>
Main
About Me
Contact
Photos
</nav>
</div>
<div id="Main Title">
<header>
<h1>Winston Berz</h1>
</header>
</body>
</html>
Want to also note that I also was using a separate document for css and got the same results so this time I resorted to internal css.
Help! Please and thank you I am still relatively new to coding.
you could try to clear your browser cache (here is how) maybe the browser is storing previous images.
Also, you could consider creating a <div> and place your background images there instead of setting the image inside css.
inside the <body> tag you can add
<div class="background-images-wrapper">
<img src="image/link/path" alt="background1"><img>
</div>
and inside your css style sheet you add this
.background-images-wrapper{
height: 100%;
width: 100%:
object-fit: cover;
z-index: -1;
z-index: -1 is to make sure that your images will always stay behind the rest of your elements

Change background color of specific section

I have an HTML home page and what I would like to change a section of a page to a different color, the issue i am facing is that i want the color to the entire page. Here is an example of what i want to achieve:
The code I tried here doesn't seem to change the entire page background color for the div tag
body {
background-color: coral;
}
<h1>The background-color Property</h1>
<div style="background-color:lightblue">
<p>The background color can be specified with a color name.</p>
</div>
First of all, your question is not clear, sorry. There is no such thing as "the entire page background color for the div tag".
I can take a guess though, and assume you mean that the background area for the div should be as wide as the viewport, i.e. extend into the margin of the page. In that case, the solution is as follows.
body {
background-color: coral;
}
/* This could be done inline, but using a class will be more efficient if there
are more of these divs on the screen */
div.highlight {
background-color:lightblue;
margin:0 -8px; padding:0 8px;
}
<h1>The background-color Property</h1>
<div class="highlight">
<p>The background color can be specified with a color name.</p>
</div>
that is very simple
you can put your element in a section with a specific id like this:
<section id='naturePart' >
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
and then write css for this section in one of external , inline or internal way like this.
external way :
create a file like style.css and link it in your html page
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
write this code in your style.css :
#naturePart{
background-color: lightblue;
}
in inline way :
<section id='naturePart' style="background-color: lightblue">
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is....</p>
</section>
pay attention that use must use one of this way and inline way has upper periority.
if you use html4 or latest version you can use div insted of section.
best regard

need an image of a shadow underneath my images that use that class

I want to use the above image in a img class to put underneath the photos. That have that class. See the markup example below.
<img class="img-shadow" src="image.jpg">
or may be like this
<div class="img-shadow">
<img src="image.jpg">
</div>
How would the css look?
HTML:
<div class="img-shadow">
<img src="image.jpg">
</div>
CSS:
.img-shadow{
background:url(your image URL) no-repeat center bottom;
padding-bottom:20px;
text-align:center;
}
Adjust the padding on the bottom of the div to increase or decrease the distance between the bottom of the image and the shadow.
Just as another option, instead of using an image for your shadow, you can use CSS3 shadow property to achieve something similar.
In the fiddle, I show the same image using the class and not using the class: JS Fiddle
.img-shadow {
box-shadow: 0px 2px 10px #000;
width: 200px;
}
If what you said in the question is what you really want to do, You can simply put the shadow image below the other image using an <img> tag like
<div>
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSyLdxqT0UBb31xeB4yMfUjCqKld2q9FqpUMZEIvq175_4-MgAPUA"/> //Your image
<img src="http://i.stack.imgur.com/ZLAht.png"/> // Your shadow image
</div>
and position them accordingly using css..
check this fiddle
Note:there might be better ways for creating a shadow below an image, just answering the question in a straight forward manner..

Filling image in div

I want to create a basic layout for webpage with divs and want to set images for their background.
Since I have smaller images I want to stretch them to fill in the divs.
There are many ways to do that. But I tried following:
</html>
<head>
<style>
img#bg {
top:0;
left:0;
width:100%;
height:100%;
}
<style>
<head>
<body>
<img src="body.jpg" alt="background image" id="bg" />
<div id="content"> </div>
<body>
</html>
This worked. Then I tried to make use of it in layout.
<div id="hmenu" style="zindex=1;height:80px;background-color:#007980"></div>
<div id="content" >
<img src="body.jpg" alt="background image" id="bg" />
</div>
This also worked. But when I tried to set image this way for a div with float:left or CSS width set, it did not worked:
<div id="header" style="zindex=1;height:300px;width:100%"></div>
<div id="hmenu" style="zindex=1;height:80px;background-color:#007980"></div>
<div id="content" style="float:right" >
<img src="body.jpg" alt="background image" id="bg" />
</div>
This doesnt work. In last HTML notice float:right.
I will like to stick to this method, not any jQuery method or others and also will like to know what is wrong here and what should be done to get the desired result with CSS modifications as I am learning this.
Seems like you want a background image
A good explanation can be found here
Basically you can make a div have a background using CSS and not having to put an tag inside, this is almost always preferable.
Example code for you could be:
body {
background-image: url('body.jpg');
background-size: cover;
}
In order for height: 100%, Top:0 etc to work you need to have a position applied to the element.
You don't as per the example code given. Give more code and i can help more. But from what you have given this is your problem.
background-size: cover;
Is a nice solution, but I'm not sure about the browser support, because it's CSS3.
I made a fiddle, is this what you were looking for?
http://jsfiddle.net/NQY6B/5/
By the way, change "zindex" to "z-index".
EDIT: I've updated the fiddle with text content in the div

HTML div with a background

I'm making a website (Although I know nothing about HTML & Photoshop).
Its quite a challenge for me and I'm pretty happy with what I got so far.
Now I want to make boxes / floating squares on the site.
So I wanted to do this by using a the div but I have no clue how :#
<div id="div1" style="background-image: url(../bg_content_middle.png);height: 129px">
HELLO IS THIS A BOX?
</div>
I have this in my style.css:
#div1 {Background: url("bg_content_middle.png");}
bg_content_middle.png is a 1 pixel high "bar" which I want between top and bottom.
And thats not even working :(
Please help me.
You're mixing in-line CSS with external CSS rules. The inline style with ../bg_content_middle.png is overriding the other background image url of bg_content_middle.png. You only need to define it once.
In this case you could go for a pure CSS solution:
<div id="div1">HELLO I AM A BOX ^_^</div>
#div1 {
background-color: #900;
border: #f33 1px solid;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
Please don't number your divs though, call them something relevant like <div id="content">.
Hope that helps
1) Make the B in background lower-case
2) Is the image in the same directory as style.css? If not, you'll have to link to the correct directory.
well, if all you want your div to have a backround, you can have something as simple as this example from this tutorial:
<body>
<div style="background: green">
<h5 >SEARCH LINKS</h5>
<a target="_blank" href="http://www.google.com">Google</a>
</div>
</body>
First of all, you only need to define this particular style once, but inline styles (styles within the tag's <style> attribute.) take precedence. You should remove the inline style in this case, since it's redundant and double check your image paths just in case. Remember that css paths can be document relative, in which case they refer to the location of the css file, and are not relative to the HTML page.
If it's one pixel high you might want to set the repeat property as well. put this in the element's CSS:
background-repeat: repeat-y;
And set a width equivalent to the image width.
You need to set the position : absolute in your css. From there you can use top, left and height to position and size your tags