Jump to content

Archived

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

dreamsight

Background Images Resizing with Browser

Recommended Posts

dreamsight

i know this is one of the most standard things to utilize in web design, but in DMS1 all you had to do was click repeat background and it would resize the background with the browser size

 

with DMS2 even the header background won't respond with the browser size.

 

probably an easy fix, but i cant find the right CSS headers or settings to fix this.

Share this post


Link to post
Share on other sites
greenfly

Hey @Dreamsight 

 

Could we see a link to the site in question and also could you provide the CSS you have tried. 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
dreamsight

http://aal.je

 

thats the site ^ 

I've used all the css i could think of, which is why im posting. apologies i cant get exact CSS, I'm on the clock and would have to recreate everything. 
any help would be greatly appreciated, like i said im sure its something simple im missing

Share this post


Link to post
Share on other sites
Danny

Not sure what you mean by saying all you had to do was click repeat background and it would resize. Background repeat doesn't resize your background image, it just repeats the image both horizontally and vertically when required.

 

I have viewed your site and I am not entirely sure how you want this image to resize ? Also, you have the image loaded twice for the same section is there a reason for that ?

 

If you can provide an image of how you want your image to appear when viewing on smaller browser widths, we may be able to assist you.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
dreamsight

Terribly sorry,  i meant i DON'T want it to resize with the browser

 

This is how i want it to view on ALL browser sizesscreen.jpg

 

this is whats happening

screen2.jpg

 

and yes, pressing repeat background used to stop it from resizing with the browser danny.

Share this post


Link to post
Share on other sites
Danny

To fixe a background image so that the white circle thing to stay in that position on all browsers will require you to use background position to position the image correctly, but you will also need to do the same thing for all devices too and widths. To so this you will need to use media queries.

 

I have just tried to do this on DMS 1.x and the same happens in DMS 1.x as in DMS 2.x, so not sure how you accomplished this in DMS 1.x.

 

As soon as you reduce your browsers window that image is going to be resized and move in position.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
dreamsight

Danny, ive used this technique on almost all the sites ive done. all on dms1. its been ridiculously straight forward up until this site/DMS2

 

im not asking for much, im also paying for support so can you be a little more specific?

Share this post


Link to post
Share on other sites
dreamsight

okay, I've resolved the background wandering away from its placing when the window is resized by adding a min-width, i think whats been throwing me off is the content itself not centering with the browser as it resizes

Share this post


Link to post
Share on other sites
dreamsight

ok so here seems to be the problem all along, the header section centers, but the content is pushed to the right? and stays fixed - there's no CSS calling this, so is this a glitch or a setting? screen23.fw_.png

Share this post


Link to post
Share on other sites
GetMeWebDesign

A better approach would be to set your background colour to the canvas to grey. You will need to change the padding for teh canvas from default (Select) to 0px.

Target the nested content area and set that background to white with Custom LESS.

Use inline custom styling or target with custom LESS for your widgetizer with the red background colour.


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites
dreamsight

Thanks GetMe, we'll give it a go

Share this post


Link to post
Share on other sites
GetMeWebDesign

dreamsight Post back a link if you run into problems


Chrome Developer tools - please use them. If you are not sure how, then it is easy to learn

Be inventive in your keyword search of the forum ie Navi > Navbar > menu > tabs > font > color. Your answer lies there somewhere!

Share this post


Link to post
Share on other sites

  • Similar Content

    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
    • clj182
      By clj182+
      Hello,
      I've been having trouble unlocking the template section for past couple of weeks. When I try clicking nothing happens. 
      I've deleted my custom css and removed plugins. Im down to having only the following plugins:
      Akismet
      Contact Form 7
      DMS Professional Tools
      Pagelines Updater
      WooCommerce
      It was working fine before i have no idea what's going on with it.
    • flourishdesignstudio
      By flourishdesignstudio+
      My DMS 2 site http://www.heart-stone.com/ will not save any new custom css... I can still edit templates and publish those but any custom css that I enter never saves.
      All WP files, themes, and plugins are up to date. 
      Any thought about what might be causing this?
    • flourishdesignstudio
      By flourishdesignstudio+
      Is there a way to edit the custom CSS via FTP? I know I can edit the custom code in the Chrome editor but is there a file path I can use to find and edit the CSS directly from our FTP?
      Thanks in advance for the help!
    • nizami
      By nizami+
      Using navbar section with correctly configured WP menu to display main navigation at https://elenaangel.com. 
      All fine in desktop viewport. Menu displays twice in hamburger mode. How to fix this please? 

×