Title: adding ‘full-width’ image to header
Last modified: August 19, 2016

---

# adding ‘full-width’ image to header

 *  [davidmiller72](https://wordpress.org/support/users/davidmiller72/)
 * (@davidmiller72)
 * [16 years ago](https://wordpress.org/support/topic/adding-full-width-image-to-header/)
 * my blog: [http://testdesign.miller-david.com/](http://testdesign.miller-david.com/)
 * hello,
 * i’m trying to transform my header into a full-width image (so it works like the
   background image here: ([http://www.august.com.au/](http://www.august.com.au/))
   with the title / tag overlaid as they are presently. in other words, i just want
   this image as the background.
 * i’ve uploaded the image (confluence.jpg) and am having it show up in the header,
   however it won’t resize or adjust when i zoom out. how can i get it to look the
   same regardless of zoom?
 * my current style.css looks like this (am using a child theme):
 * >  [@import](https://wordpress.org/support/users/import/) url(“../titan/style.
   > css”);
   > /*Header
   >  ———————————————————— */ #header { width: 100%; height: 100%; border-
   > bottom: 1px solid #ede7e0; background: #443B31 url([http://testdesign.miller-david.com/wp-content/themes/titan/images/confluence.jpg](http://testdesign.miller-david.com/wp-content/themes/titan/images/confluence.jpg))
   > no-repeat; }
   > h1#title, div#title {
   >  float: left; padding: 30px 0; font-size: 5em; font-weight:
   > bold; line-height: 404px; letter-spacing:-6px; }
   > #description {
   >  margin: 200px 0 0 40px; float: left; color: #796957; font-size:
   > 1.4em; font-weight: bold; line-height: 50px; }
   > #nav {
   >  width: 100%; font-size: 1.3em; font-weight: bold; background: #443B31
   > url([http://testdesign.miller-david.com/wp-content/themes/titan/images/nav-background.gif](http://testdesign.miller-david.com/wp-content/themes/titan/images/nav-background.gif))
   > repeat-x bottom }
   > div.notice {
   >  display: block; padding: 60px 0; font-size: 1.6em; } div.notice
   > strong { color: #2f2922; } div.notice div { margin: 10px 0; padding: 20px; 
   > background: #f0ebe6 url(../images/notice-background.gif) repeat-x top left;}
   > div.notice div h2 { font-size: 1.3em; margin-bottom: 10px; }
 * apologies for the big chunks of code.
 * can anyone help with this?
 * thanks so much.

Viewing 1 replies (of 1 total)

 *  [Michael](https://wordpress.org/support/users/alchymyth/)
 * (@alchymyth)
 * [16 years ago](https://wordpress.org/support/topic/adding-full-width-image-to-header/#post-1517815)
 * won’t work with css alone – background imagese don’t scale.
 * as you are not the first one with this idea – check some search results: [‘make a scaling background image’](http://www.google.co.uk/search?num=20&hl=en&safe=off&rlz=1T4SNYK_en-GBIE248IE248&ei=_MICTLa_A43y0gTxi8DMAw&sa=X&oi=spellfullpage&resnum=0&ct=result&cd=2&ved=0CBQQvwUoAQ&q=make+a+scaling+background+image&spell=1)

Viewing 1 replies (of 1 total)

The topic ‘adding ‘full-width’ image to header’ is closed to new replies.

## Tags

 * [full-width image](https://wordpress.org/support/topic-tag/full-width-image/)
 * [header](https://wordpress.org/support/topic-tag/header/)

 * 1 reply
 * 2 participants
 * Last reply from: [Michael](https://wordpress.org/support/users/alchymyth/)
 * Last activity: [16 years ago](https://wordpress.org/support/topic/adding-full-width-image-to-header/#post-1517815)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics