Cannot scale background div image - html

For whatever reason I cannot manually scale the background image of a div no matter what do. background-size and max-height,width have no effect whatsoever. The image is ignoring my style tags. Can somebody please explain why I cannot format the div's background image? I would like to scale the img/Stage-Background.png down from 1600x1076 down to 750x650
<!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>
<link rel="stylesheet" type="text/css" href="SDL.css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Home</title>
</head>
<body>
<img src="img/SDL 4 Final Recompress.jpg" style="margin-left:auto; margin-right:auto; " />
<div style="background-image:url(img/Stage-Background.png); background-size:80px 60px;
background-repeat:no-repeat;">
<center>
<embed
src="http://blip.tv/play/AwGUv2w"
type="application/x-shockwave-flash" width="669"
height="500" allowscriptaccess="always"
allowfullscreen="true" style="margin-top:100px; margin-bottom:200px;">
</embed>
</center>
</div>
</body>
</html>

Based out of my knowledge we cannot scale a background image
If your image dimensions are greater than that of the div then
<div style="width:400px; height:400px;background:url(xyz.png);"></div>
with xyz.png dimensions greater than div's width and height.
You can use:
background-position:center;
Else try using normal img tag then use absolute positioning to place your elements on top of the image.
<div class="your_box_element" style="width:400px;height:400px;position:relative;">
<img width="400px" height="400px" />
<div class="your_text_on_top_of image" style="position:absolute;top:0px; left:0px;">
Your text and other elements go here
</div>
</div>
The method to load the image of greater dimensions and then scaling won't give you good performance hence better to have the image scaled appropriately to the div element incase you want to use it as a background. Seeing your example its better if you make changes to the background image to the required size.
See this for more details on background position background-position to set correct fit
If you want to learn more about background image positions and how they are used commonly on web try reading about Image Sprites

I guess you are dealing with this image: img/Stage-Background.png
Instead of background-size, use height & width parameters in px.
Also, if you can tell us what is the original size of the image, and what size you wish to keep for your DIV.

Related

Resizing my page make items disappear

When the webpage become too small some part of it disappear but I would like to make it stay the way it's positioned but resize with the page no matter how small it becomes.
Here's the problem
Here's the code
<!DOCTYPE html>
<html>
<style>
body{
background-color: #1C1C1C;
}
#picture {
text-align: center;
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;
}
</style>
<title>lllllllllll</title>
<body>
<div id="picture">
<img src="c.png" alt="llllll" width="33%" height="100%" />
<img src="n.png" alt="llllll" width="33%" height="100%" />
<img src="m.png" alt="llllll" width="33%" height="100%" />
</div>
</body>
Welcome to Stack Overflow!
First and foremost, Your basic HTML structure should be as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- CONTENT -->
</body>
</html>
And about Your main problem, try and use CSS to style your layout instead of assigning inline properties like width="33%" and others alike. Right now, your images are stretching because of the inlined properties which are not the same as a style applied to them.
By using these properties on your images, you are telling them to be 33% of their container, but images are not block elments so therefore, they need to be in a container, for example a div.
e.g.
<div class="imageContainer">
<img src="img.jpg" alt=""/>
</div>
I have made a JS Fiddle for you to try it yourself.
When someone here on StackOverflow says "here is a Fiddle" or something similar, what they mean is, they have created a small online coding environment that acts as a sandbox for your project. You have your HTMl, CSS, Javascript and Output, alongside options for adding external content as well. https://jsfiddle.net/
I have changed a few things here and there to show you an example of basic usage. Please feel free to ask what You dont understand.

absolutely positioned picture covering text

I have a picture that i've positioned absolutely to use as a background. But it's covering up the content of the page.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#pic1
{
position:absolute;
top: 0px;
left: 0px;
}
</style>
</head>
<body>
<h1> hi there </h1>
<h1> hi there </h1>
<h1> hi there </h1>
<img id="pic1" src="1.jpg" width="100%" alt="picture">
</body>
</html>
You should change the z-index css property of the image
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order
how ever you can use another property on you body element to set background :
background-image:url('image url');
Why not use background image placement? This way you have less markup and more control over how you want the background to be displayed. If you still want to place background in this way, then try z-index: -1 and see if that works.
Overall, the way you are creating this page is less than optimal. You are setting image width using attribute. Why not get rid of img tag altogether and just roll with image placement using CSS. Lots of stuff on the web that shows how to do it.

background image failing me with simple css

I'm sure there is a ridiculously simple answer for why this simple example is not showing my the background image but I just don't see it. I'm expecting to see the image twice, once when the image uses the class, and once when it references the image directly.
Thoughts
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
.chkCombo {
background: transparent url(http://cache.siliconvalley-codecamp.com/Images/silicon-valley-code-camp.png);
}
</style>
</head>
<body>
<div class="x">
<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="chkCombo">
</div>
<hr />
<div class="x">
<img src="http://cache.siliconvalley-codecamp.com/Images/silicon-valley-code-camp.png" />
</div>
</body>
</html>
By adding height and width to the image and setting it to display: block; the image will appear.
Here is a the fixed fiddle
By the way, I don't see the effect of the base64 image, you use it and also using a class with background image on the same element.
Try using this style
.chkCombo {
height: 56px;
width: 350px;
background: transparent url(http://cache.siliconvalley-codecamp.com/Images/silicon-valley-code-camp.png);
}
A jsFiddle demo
P.S: A background image is litteraly a "background" image so if an element has no dimentions(height and width) then the background image will have no dimentions. Therefore you need to give it a hight and width

Getting an SVG to Keep It's Aspect Ratio in an HTML Page

I have HTML like that below. I create a SVG with a viewbox of 100x100. When rendered (in Chrome) The svg is rendering itself as 200px wide (good) but ~500px high and the text is pushed off the bottom of the page. Making my window bigger or smaller has no affect - the SVG simply grows or shrinks in height accordingly.
Why is the svg not constrained in height in any way? Is there a way to make it automatically keep it's 1:1 aspect ratio? The content inside of the SVG is fine - it scales appropriately. This is causing some major headaches
<html>
<head>
<title>SVG Ahoy</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div style="width: 200px;">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"
preserveAspectRatio="xMinYMin meet" version="1.1"></svg>
<div>content below</div>
</div>
</body>
</html>
You have prserveApsectRatio set here, but I do not see a height on your div. Is that causing an issue?Also, if you look at the svg documentation, svg items default to 100% width and height. Try setting it's height and widths explicitly as pixel values and see if that helps.
Put the svg in an <img> tag: <img src="path_to_svg" />
Style the image: {width: 100%; height: auto;}
Setting the height to auto is the secret. Like this, even the preserveAspectRatio attribute is optional. (Putting it into a table layout will break Internet Explorer compatability).

Transparent div containing non transparent content - IE 6 height:100% not working

Hey there! I have a bit of a sticky IE 6 problem (don't we all?).
I figured out what I think is a pretty neat way to have a div with a transparent background that shows the background's body image and containing non-transparent content. This consists of three divs really:
One big container div, one absolutely positioned transparent div for the background and one relatively positioned div with the non-transparent content.
I position the two divs inside the containing div so they sit on top of each other giving the appearance of a transparent background with non-transparent content.
The Containing div is pushed to the size of the content div. I set the transparent background's height and width to 100% causing it to take on the containing div's size. This then means that my background expands with the content making all my div's extensable.
This last bit is where the problem comes in. IE 6 does not cause the background div to take on the height of the containing div. If I specify a height it works fine, but this means that I loose the extendability of the whole thing.
Here is the basic code:
HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="contentDiv">
<div class="tranparentDiv"></div>
<div class="nonTranparentContent">
<div class="contentBody">
<h2 id="quote">“time is given to let you apply what you have learnt in reality.”</h2>
<p>– Nandipha Nombuthuma, Concept Interactive graduate</p>
</div>
</div>
</div>
</body>
</html>
CSS code (save as “style.css”)
#charset "utf-8";
/* CSS Document */
body{
background:url(bg.png);
}
.tranparentDiv{
-khtml-opacity:.6; /*several different ways to set the transparency to ensure cross browser independence*/
-moz-opacity:.6;
-ms-filter:"alpha(opacity=60)";
filter:alpha(opacity=60);
opacity:.6;
position:absolute;
top:0;
left:0;
background:#FFFFFF;
width:100%;
height:100%;
}
.nonTranparentContent{
width:inherit;
position:relative;
}
#contentDiv{
width:500px;
margin-left:auto;
margin-right:auto;
position:relative;
/*height:200px add this to work in ie 6*/
}
I'd appreciate any suggestions how I could work around this. I would hate to have to go and set a height every time I change my content.
IE6 can't calculate what 100% is without a height specified to the containing element. To my knowledge there really isn't anything you can do to get exactly what you want here with CSS, but you could use some sort of javascript to find the height of the container and then set the height of the transparent div to match the container's height.
Using jQuery, I believe it would look something like this:
var containerHeight = $('#contentDiv').height() + 'px';
$('.tranparentDiv').height(containerHeight);