Jump to content

Archived

This topic is now archived and is closed to further replies.

JawDesigns

Background images and responsive problems

Recommended Posts

JawDesigns

Hi to all,

 

I am trying to add headers for sections in my website that contain a .png background image that I've produced in Photoshop. However, I am having problems with getting the text to fit inside of the .png file that I've created and I am unfortunately a little unsure of what's the best way to do this?

 

Obviously the .png file has a set width and height but the text inside is responsive and therefore sometimes it will not fit inside the .png depending on the browser size. I was hoping someone could please help me and suggest the best way on how to approach this? I have attached some screenshots which will show you what I have done in DMS and also another screen shot that shows what the background image and text looks like when the browser changes screen size (made smaller).

 

Here's a few things that I was thinking of doing?

 

1) Maybe make the website non-responsive (fixed width) so that it works better with background images (maybe). Is there a setting in DMS for this so the website won't re-format when the screen size is smaller?

 

2) Render the header text into the .png file from Photoshop and use a separate 'text box' beneath for subtext which is responsive? However, not sure if rendering text into images is a good idea for searching/finding purposes

 

If anyone has any suggestions/tutorials please let me know.

 

Thanks, James


James Wilson

Designer & Photographer

 

Share this post


Link to post
Share on other sites
Danny

Hi,

 

From those screenshots it difficult to understand what you're trying to achieve. Would it be possible for you to provide a link to the site in question please.

Also, it's not currently possible to disable the responsive design and adding this option in my opinion would be a bad idea. The majority of visitors viewing your website will be users of mobile devices such as tablets and phones and this number will only increase. Thats why most frameworks such as Bootstrap are going mobile first, due to the increase of users using such devices on a daily basis.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
JawDesigns

Hi Danny,

 

Yes ideally it would be good to make everything responsive. Take a look at my website http://www.jawdesigns.co.uk and you'll see what I've done with the heading boxes. I just want the text to fit inside of the background images but on my mobile device the text is no-way near positioned inside of the .png file. It's just hard knowing how I should approach this and what size the .png files should be? For now I am just experimenting but not having much luck.

 

The site is a very rough draft but hopefully you'll be able to see what I mean?

 

Cheers, James


James Wilson

Designer & Photographer

 

Share this post


Link to post
Share on other sites
Rob

Hi James,

 

Just throwing my 2pence in, but I wonder if you should use % based image sizing, absolute positioning, and em size for the font.

 

I'm noting that the png is set in pixel widths (not really responsive).  I see that you have the fonts set to pixel heights as well.

 

I think converting to more responsive size formats could help you.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
JawDesigns

Hi Rob,

 

Your feedback is certainly welcome so thanks! I changed my website to 'Percentage Width' (not pixel based) thanks for pointing that out. I'm always trying to use 'em' for everything so there shouldn't be any font which is pixel based? The font I'm using at the top of my home page 'creative designer' isn't scaling when viewed on a mobile device because 7em is too big horizontally. It would be great the text would scale depending on the size of the browser window but not sure how to do this? Thanks for your input and please do let me know if I am doing anything incorrect with my site (http://jawdesigns.co.uk) which might be causing any responsive issues?

 

Thanks a lot for the help!


James Wilson

Designer & Photographer

 

Share this post


Link to post
Share on other sites
Danny

HI,

 

If you're using DMS, then you shouldn't need to change anything, add your image to the Section Area and then the image should respond to your devices screen size. If the image isn't in the correct location, then you may need to adjust its position using custom CSS @media queries.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×