[SOLVED] Image Positioning

Teaplease · Apr 16, 2013

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;

Tekno Venus · Apr 16, 2013

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

Teaplease · Apr 16, 2013

Stephen,thanks for that.I will have to study it & try it.Will get back to you in due course.

Tekno Venus · Apr 16, 2013

Not a problem,

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

Stephen

Teaplease · Apr 17, 2013

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.

Tekno Venus · Apr 17, 2013

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

Teaplease · Apr 17, 2013

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?

Tekno Venus · Apr 17, 2013

Hi

Click the go advanced button to go to Advanced Mode.

Wrap the code in [HTML][/HTML] tags when posting it. See if that works

Teaplease · Apr 17, 2013

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;
}


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>

Tekno Venus · Apr 17, 2013

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>

Teaplease · Apr 17, 2013

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.

Tekno Venus · Apr 17, 2013

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

Teaplease · Apr 17, 2013

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?

Tekno Venus · Apr 17, 2013

Yes, if you could upload the whole folder that would be useful

Stephen

Teaplease · Apr 17, 2013

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.

Teaplease · Apr 17, 2013

Tekno Venus said:
Yes, if you could upload the whole folder that would be useful

Stephen

OK will do...

Teaplease · Apr 17, 2013

Attached below:

View attachment Chromium.zip

Teaplease · Apr 18, 2013

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!

:

Tekno Venus · Apr 18, 2013

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

Teaplease · Apr 18, 2013

Hey,no worries,take your time.Absolutely no hurry whatsoever!

[SOLVED] Image Positioning

Contributor

Senior Administrator, Developer

Contributor

Senior Administrator, Developer

Contributor

Senior Administrator, Developer

Contributor

Senior Administrator, Developer

Contributor

Senior Administrator, Developer

Contributor

Senior Administrator, Developer

Contributor

Senior Administrator, Developer

Contributor

Contributor

Contributor

Contributor

Senior Administrator, Developer

Contributor