35% OFF EVERYTHING
Our 11th BIRTHDAY SALE
Buy Now

Background Header Image Size (GDF)

This topic contains 9 replies, has 3 voices, and was last updated by  Paolo 9 years, 9 months ago.

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
  • Author
    Posts
  • July 2, 2015 at 10:45 am #44424

    adyp
    Expired Member
    Post count: 496

    Hello,

    I have experimented putting a background header image on my site through GDF Modern Child settings – there was some automatic cropping of the image and it repeated.

    Q: what size image should I be aiming to upload? And could you recommend a useful open-source package that I could use in Ubuntu to edit a photo to the right size/format?

    Thanks

    July 2, 2015 at 12:16 pm #44435

    Simone
    Expired Member
    Post count: 3515

    Hello, the GDF Modern uses a responsive (and so dynamic) width, so there isn’t a fixed resolution. The height is 147px (for the #inner-header id).

    On linux you can use Gimp as free image editor http://www.gimp.org/downloads/

    July 2, 2015 at 1:36 pm #44443

    adyp
    Expired Member
    Post count: 496

    Hi Simone,

    Ok – so if I want to use one of my photos as a background header is it possible for me to control the cropping/area selected? I couldn’t see how to do this while experimenting – it just top-sliced the photo and put this top-slice in one-and-half times across the header.

    Thanks,
    Adrian

    July 2, 2015 at 2:00 pm #44444

    Simone
    Expired Member
    Post count: 3515

    to be honest, in a dynamic-width website, an image would not be ok because if you expand/stretch the width of th window, the image could be not what you expect..it is good to use a pattern or something similar.
    You can, however, use the cover attribute, in css, as explained here
    http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover

    July 2, 2015 at 2:56 pm #44451

    adyp
    Expired Member
    Post count: 496

    Thanks Simone,

    I am studying CSS at the moment and will look at that.

    I see a lot of websites with photos (and otherwise designed images) as background either for the header or main body – does that mean that they are not using a theme that doesn’t have the responsive/dynamic thing going on, or are they using CSS like in your link?

    Sorry if that appears a stupid question (it isn’t to me).
    Adrian

    July 2, 2015 at 2:59 pm #44453

    Simone
    Expired Member
    Post count: 3515

    Hi Adrian, usually boxed/fixed websites uses a fixed image, I didn’t say it isn’t possibile, there are some techniques to make it work fine (like background-size:cover;

    July 2, 2015 at 3:11 pm #44455

    adyp
    Expired Member
    Post count: 496

    OK thanks Simone,

    I’m drifting into questions I should be posing elsewhere …

    finally though, in terms of uploading a background header image into GDF Modern, what guidelines would you suggest in terms of file format/dimensions/aspect-ratio for the image that would make it likely that the background header image would resemble the original image – at least on most computers?

    July 2, 2015 at 7:04 pm #44496

    Paolo
    Site Admin
    Post count: 31211

    Hi,
    I would say 1600px X 140px would fit 90% of screen
    1920px X 140px would cover 99% but could be a bit heavy and slow down your website.

    Try to keep it as light in size as possible.

    Thanks

    July 3, 2015 at 8:34 am #44545

    adyp
    Expired Member
    Post count: 496

    Thanks Paolo,

    I’ve also started playing with the background header image controls in the GDF Modern Options (not sure how I missed them before!) – I should be able to get something I am happy with.

    July 3, 2015 at 4:53 pm #44604

    Paolo
    Site Admin
    Post count: 31211

    you are welcome 🙂

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
20% Discount Offer
Hurry! Get your 20% discount before it expires. Get 20% Discount