Background image op vaste plaats bij wijzigen schermgrootte

Status
Niet open voor verdere reacties.
G

geertvansoest

Gebruiker
Lid geworden
9 aug 2011
Berichten
16
Beste,

Ik ben momenteel bezig met een facelift van mijn portfolio website, welke via de volgende links is te bekijken: www.geertvansoest.nl/newport2/index.php.

Ik wil graag het rode driehoek linksboven precies achter het logo plaatsen, zoals op deze Photoshop te zien:

driehoek.jpg

Deze zou ik gemakkelijk erachter kunnen plaatsen, maar omdat ik vooral met Widths in % werk weet ik niet hoe dat te doen.
Ik heb het de background image nu in een grote div binnen de body geplaatst '#body2', maar hoe zorg ik ervoor dat hij steeds precies achter het logo geplaatst blijf.

Hier de relevante php en css code:

.PHP
PHP: 
<body>	
	<div id="body2">	
	<? include("includes/header.php"); ?>
	
	(...)
		
	<? include("includes/footer.php"); ?>
	</div>
</body>

CSS
Code: 
* 
{
	margin: 0;
	padding: 0;
	font-family: arial, sans-serif;
	font-size: 11px;
}

body 
{
	background: #f2f2f2;
}

#body2
{
	background-image: url('../images/rood.png');
	background-repeat: no-repeat;
	background-size: 50%;
}

a 
{
	color: #000000;
	text-decoration: none;
}

#content, .content, #project 
{
	width: 80%;
	max-width: 960px;
	height: auto;
	text-align: center;
	margin: 0 auto;
}

#project
{
	width: 100%;
}

#content
{
	margin: 30px auto 50px !important;
}

/* header */
#header {
	box-shadow: 0px 0px 10px 0px #acacac;
}

#header .content 
{
	width: 80%;
	max-width: 960px;
	height: auto;
	padding: 10px 0;
	display: table;
}

#header a 
{
	color: #000000;
}

#logo 
{
	width: 98%;
	max-width: 75px;
	margin: 0 1%;
}

#logo, #headerTekst 
{
	float: left;
}

#headerTekst 
{
	position: relative;
	top: 8px;
	text-align: left;
}

#logoNaam span 
{
	font-size: 32px;
	font-family: 'century gothic';
	font-weight: bold;
}

#diensten span 
{
	text-transform: uppercase;
}

Wie o wie kan me helpen?
Alvast bedankt.
 
Hoi, #body2 een background-position: 0 0; geven en de background-size op 25% bijv zetten? Volgens mij moet het daarmee (althans met firebug getest) werken.
 
Bedankt voor je reactie, maar doesn't fix the problem.

Op zeker moment is de positie dan goed, maar zodra je de schermgrootte veranderd niet meer:

Naamloos.jpg
 
Ik denk dan dat je met media queries aan de slag moet om ervoor te zorgen dat bij diverse resoluties e.e.a. op de juiste plaats blijft staan. Want nu wordt het kleiner vanwege de percentages. Maak je er vaste grootte van dan heb je weer niet wat je wil volgens mij. Hm, even over nadenken. Leuke uitdaging dat wel ;)
 
Laatst bewerkt:
damnsharp zei:
Ik denk dan dat je met media queries aan de slag moet om ervoor te zorgen dat bij diverse resoluties e.e.a. op de juiste plaats blijft staan. Want nu wordt het kleiner vanwege de percentages. Maak je er vaste grootte van dan heb je weer niet wat je wil volgens mij. Hm, even over nadenken. Leuke uitdaging dat wel ;)
Klik om te vergroten...

Ik werd trouwens al met media queries, namelijk om bij bepaalde resoluties meer of juist minder kaders langs elkaar te plaatsen. ;) Zelf zit het als volgt in mijn hoofd: als de rechterkant van de driehoek op dezelfde plaats (x-as) staat als de rechterkant van het logo zou het moeten kloppen. Maar hoe doe ik dat? Zodoende dat hij links evengoed doorloopt?
 
Het is inmiddels gelukt! Via de volgende jquery code:

PHP: 
// functies aanroepen
$(document).ready(function()
{
    background();
    window.setInterval(background, 100);
});

function background()
{
    var rechts = $("#logo").offset().left + $("#logo").outerWidth() - 990;
    $('body').css('background-position', rechts+'px 0px');
}

Resultaat: www.geertvansoest.nl/newport3
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan