[SOLVED] Image Positioning

Teaplease

Contributor
Joined
Mar 19, 2013
Posts
57
I think this is the relevant part of the forum for my problem.I have extremely minimal,almost non-existent knowledge re:html/CSS but have modified a custom bookmarks page I found on the net.Basically the large Chromium icon & background I put together in PhotoShop leaves a white border down the right side & want to eliminate it.Thanks.This is the relevant code I have:
Code:
Chromium &nbsp 28.0.1480.0body {    background-image: url(chromium2.png);     background-repeat: no-repeat ;    background-attachment: fixed;        background-size: contain;
nWOvG3a.png
 
Hi,

If the webpage will only be viewed in a modern browser, i.e. Chrome, IE9/10, Firefox 4+ etc. then you can use the cover attribute. I would also recommend for a full page background using html rather than body.

The code would look like this:

Code:
html {
    background-image: url(chromium2.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

I have also set the no-repeat, center and fixed attributes in one line which saves code. They do the same things as if they were assigned separately, but these are easier to type. :)

That code would be either put in an inline/internal style sheet (between <style></style> tags in the document head), or as an external style sheet reference using the code

Code:
<link rel="stylesheet" type="text/css" href="stylesheet.css">

That would also go in the header, and you would change stylesheet.css to whatever you call your external style sheet. Be sure to save the stylesheet in the same folder as the main HTML page.




I have typed up an example page using an example background image I found on CSS-Tricks. So image copyright goes to them. :)

Enjoy this code, ask anything you wish. Note the image automatically scales to the browser window size.

HTML:
<!DOCTYPE html> <!--HTML Doctype-->
<html>
<head>
    <meta charset="UTF-8"> <!--Not really important here, don't worry about this-->
    <title>Background image example</title> <!--Page title-->
    
    <!--Internal stylesheet, this is what sets the background-->
    <style>
        html { 
            background: url(http://css-tricks.com/examples/FullPageBackgroundImage/images/bg.jpg) no-repeat center center fixed;  // Change the URL to the location of your image, as you did before.
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
    </style>
</head>
<body><!--Empty page body since you don't really need anything in here-->
</body>
</html>

Hope this helps,

Stephen
 
Not a problem,

Let me know how you get on and feel free to ask any HTML/CSS questions you may have. :)

Stephen
 
Code:
html {    background-image: url(chromium2.png) no-repeat center center fixed;    -webkit-background-size: cover;    -moz-background-size: cover;    -o-background-size: cover;    background-size: cover;}
I added this code but I'm getting no background image at all now so i've obviously missed something,or not understood the rest of your instructions.Thanks.
 
Hi there,

Could you please upload the whole code as it stands right now?

It would save me time guessing at the problem.

Regards,
Stephen
 
No problem but I can't find Full Reply & when I try & post all the code only a fraction of it appears.Wondering whether I should zip the whole file & upload?
 
Hi

Click the go advanced button to go to Advanced Mode.

Screenshot - 17_04_2013 , 05_21_32 PM.png

Wrap the code in [HTML][/HTML] tags when posting it. See if that works
 
Got it!I use bfilter,filtering web proxy & that was blocking the Go Advanced button & the little icons above the text space,so I turned it off a second!

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" href="style/style.css" type="text/css" />
	<script type="text/javascript" src="js/jquery-1.5.min.js"></script>
	<script type="text/javascript" src="js/settings.js"></script>
	<script type="text/javascript" src="js/script.js"></script>




<!-- Page Title -->
<title>Chromium &nbsp 28.0.1482.0</title>


<style type="text/css">
body {
    background-image: url(chromium2.png); 
    background-repeat: no-repeat ;
    background-attachment: fixed;    
    background-size: contain;
}


</style>
</head>
<body>
<abruzzi>




one


http://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?path=Win/ || chromium


two


three


four


five


</abruzzi>


<IMG STYLE="position: absolute; top: 10px; right: 25px;" SRC="chromium.png">


<h2>The Chromium Authors </h2>               
<h3>Copyright 2013 The Chromium </h3>
<h4>Authors. All rights reserved. </h4>                         


<div id="date">
<script type="text/javascript">


function makeArray() {
for (i = 0; i<makeArray.arguments.length; i++)
this[i + 1] = makeArray.arguments[i];
}


var months = new makeArray('January','February','March','April','May',
'June','July','August','September','October','November','December');
var date = new Date();
var day = date.getDate();
var month = date.getMonth() + 1;
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;


document.write(day + " " + months[month] + " " + year);


</script>
</div>


<script type="text/javascript">
    
    $(window).load(function() {
        $('#slider').nivoSlider({ borderRadius: 5 });
    });   
</script>
<script type="text/javascript">
$('body').hide();
$('body').fadeIn(2000);
</script>




<script type="text/javascript">
	if(showDate) {
		// Add empty '#clock' div
		$('body').append('<div id="date"></div>');


	  // Update clock
   	setInterval('makeArray()',);
	}
</script>


</body>
</html>
 
May I ask what all the Javascript is for? What is the eventual purpose of this page?

Anyway, I have managed to get this working. You can change the URL of the background image in the CSS as you wish.

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="style/style.css" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.5.min.js"></script>
    <script type="text/javascript" src="js/settings.js"></script>
    <script type="text/javascript" src="js/script.js"></script>




<!-- Page Title -->
<title>Chromium &nbsp 28.0.1482.0</title>


<style>
html { 
  background: url(http://css-tricks.com/examples/FullPageBackgroundImage/images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


</style>
</head>
<body>
<abruzzi>




one


http://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?path=Win/ || chromium


two


three


four


five


</abruzzi>


<IMG STYLE="position: absolute; top: 10px; right: 25px;" SRC="chromium.png">


<h2>The Chromium Authors </h2>               
<h3>Copyright 2013 The Chromium </h3>
<h4>Authors. All rights reserved. </h4>                         


<div id="date">
<script type="text/javascript">


function makeArray() {
for (i = 0; i<makeArray.arguments.length; i++)
this[i + 1] = makeArray.arguments[i];
}


var months = new makeArray('January','February','March','April','May',
'June','July','August','September','October','November','December');
var date = new Date();
var day = date.getDate();
var month = date.getMonth() + 1;
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;


document.write(day + " " + months[month] + " " + year);


</script>
</div>


<script type="text/javascript">
    
    $(window).load(function() {
        $('#slider').nivoSlider({ borderRadius: 5 });
    });   
</script>
<script type="text/javascript">
$('body').hide();
$('body').fadeIn(2000);
</script>




<script type="text/javascript">
    if(showDate) {
        // Add empty '#clock' div
        $('body').append('<div id="date"></div>');


      // Update clock
       setInterval('makeArray()',);
    }
</script>


</body>
</html>
 
Most of that was copied & the javascript was included.It's just a custom home page that I add bookmarks to that drop down(jquery I think) on mouseover.One I already added.Your code is displaying the image but it's still not positioned like my first screenshot in the first post with left & bottom edge of outer circle touching the edge.If thats not possible it really doesn't matter.Thanks for all your efforts.
 
Strange...

Works OK on my system.

View attachment 3871

Could you try again please? Create a new document, paste the below code in and save it in the same folder as the other file and load it. Does it work?

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="style/style.css" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.5.min.js"></script>
    <script type="text/javascript" src="js/settings.js"></script>
    <script type="text/javascript" src="js/script.js"></script>




<!-- Page Title -->
<title>Chromium &nbsp 28.0.1482.0</title>


<style>
html { 
  background: url(http://css-tricks.com/examples/FullPageBackgroundImage/images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}


</style>
</head>
<body>
<abruzzi>




one


http://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?path=Win/ || chromium


two


three


four


five


</abruzzi>


<IMG STYLE="position: absolute; top: 10px; right: 25px;" SRC="chromium.png">


<h2>The Chromium Authors </h2>               
<h3>Copyright 2013 The Chromium </h3>
<h4>Authors. All rights reserved. </h4>                         


<div id="date">
<script type="text/javascript">


function makeArray() {
for (i = 0; i<makeArray.arguments.length; i++)
this[i + 1] = makeArray.arguments[i];
}


var months = new makeArray('January','February','March','April','May',
'June','July','August','September','October','November','December');
var date = new Date();
var day = date.getDate();
var month = date.getMonth() + 1;
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;


document.write(day + " " + months[month] + " " + year);


</script>
</div>


<script type="text/javascript">
    
    $(window).load(function() {
        $('#slider').nivoSlider({ borderRadius: 5 });
    });   
</script>
<script type="text/javascript">
$('body').hide();
$('body').fadeIn(2000);
</script>




<script type="text/javascript">
    if(showDate) {
        // Add empty '#clock' div
        $('body').append('<div id="date"></div>');


      // Update clock
       setInterval('makeArray()',);
    }
</script>


</body>
</html>

Regards,
Stephen
 
Stephen,thanks for your patience!Absolutely,your image appears perfectly but maybe I haven't explained exactly what I mean!Take a look at my first post.You'll see the outer circle of the centre of the large chromium logo touching the left & bottom edge of the browser.That position stays constant whatever size the browser is.With the code you've produced the image position is different depending on the size of the browser window & I want to keep it constant.So far the only way to do that is to have the white border on right side.I'll upload the whole folder if it helps?
 
1.png

Here's the result with your code.The positioning of the image is different from my first post & is different again if I resize the browser.At least the white border has disappeared.
 
The image below with a different background image illustrates what I mean better.
Top 2 images using this code suggested on the forum, has image cut off with browser full size & worse when minimized
Code:
html {   background: url(chromium2.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Bottom 2 images with this code I used originally has image correctly contained whatever size of browser window
Code:
body {
    background-image: url(chromium2.png); 
    background-repeat: no-repeat ;
    background-attachment: fixed;    
    background-size: contain;
}

However,as i said at the beginning of thread using the latter code with the Chromium logo results in a white border on the right!

Panorama.png


:
 
Hi Teaplease,

Please accept my apologies about the delay. I have not had a chance to look at this, I will do my best to look tomorrow, but cannot make any promises.

Sorry about this,

Stephen
 
Back
Top