Help with responsive CSS header text and image

Hi all

I know I can setup different media sizes for responsive view, but I am trying to work out how I can do this dynamically via responsive css (only).

What I have is a small logo image that could be used as a background or aa an image and then there is the site title that has space between for where the logo should appear. The title is a simple two word title which should make things easier. Both the site title words and the logo need to auto resize based on screen with.

So in essence I am wanting

header text word 1 - image - header text word 2

Some css I have been playing with but not able to get it to work is

Code:

#header { max-width:100%; border-bottom:0 none; } #header { background-repeat:no-repeat; background-size:contain; background-position:center; } #header #site-title { height:101px; height:6.3125rem; font-size:56px; font-size:3.5rem; line-height:99px; line-height:6.1875rem; word-spacing:104px; word-spacing:6.5rem; text-align:center; text-transform:uppercase; background: transparent url(images/logo.png) no-repeat 49% 0; white-space: nowrap }

The above tries to use the logo as a background, but if it would work better as a standard image I'd be happy (actually better for me) to change that

The html output I have tried several ways as shown here

HTML Code:

<div id="header"> <h1 id="site-title"><a href="http://mysite.com/">Two Words</a></h1> </div>

HTML Code:

<div id="header"> <img src="http://mysite.com/logo.png" alt="Two Words"><h1 id="site-title"><a href="http://mysite/">Two Words</h1></a> </div>

HTML Code:

<div id="header"> <h1 id="site-title"><a href="http://mysite/"><img src="http://mysite.com/logo.png" alt="Two Words">Two Words</a></h1> </div>

Thanks for your help

First of all does your HTML contain the following?

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

These lines ‘tell’ the browser what sort of device to render an image for.

The CSS then reflects this information, see example below.

Code:

/* Settings for a Desktop PC ===================*/ /* desktop styles here */ /* Settings for a Tablet ===================*/ @media screen and (max-width: 980px) { /* tablet styles here */ } /* Settings for a SmartPhone ===================*/ @media screen and (max-width: 640px) { /* smartphone styles here */ }

We would need a link to the page to offer specific help, but in the meantime, for a totally fluid/scalable option, have a play with viewport units http://caniuse.com/#feat=viewport-units Good for modern browsers and IE9+ (you can provide fixed-size fall-backs for IE8 in a conditional stylesheet)

Code:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" /> <meta name="description" lang="en" content="A responsive / scalable header demo."/> <title>Responsive / Scalable Header</title> <style> #header #site-title { text-align: center; text-transform: uppercase; white-space: nowrap; background: #ddd url(logo.png) no-repeat 46.5% 50%; /* tested with a 192 x 192 px img */ background-size: 7vw; font-size: 5vw; line-height: 10vw; word-spacing: 10vw; } @media ( min-width:60em ) { /* bigger than 960px - fixed units after this point to stop upscaling */ #header #site-title { background-position: calc(50% - 30px) 50%; /* calc offset from center to account for different word length */ background-size: 67px; font-size: 3em; line-height: 2em; word-spacing: 2em; } } </style> </head> <body> <div id="header"> <h1 id="site-title"><a href="http://mysite/">Two Words</a></h1> </div> </body> </html>

If you need more help, please provide a link to your page.

Thank you both for your help, I will try what you have provided, but if I can't nut it out I will return with a link to the page in question.

Cheers