Im using this code:
body {
background-image:url('http://evoxity.net/modules/themeconfigurator/img/bgen.jpg')!important;
background-repeat:no-repeat!important;
-webkit-background-size:cover!important;
-moz-background-size:cover!important;
-o-background-size:cover!important;
background-size:fixed!important;
background-position:center!important;
}
I tried to create it responsive and its workign so far but it should be more static. My problem is, that my website software doesnt feature container background by default and im not that deep into css to do it by my self so i decided to create it on the background.
Now i would like to work with #media but i also would like to get this background keeping how it is even if i add the windwos bar to the right/left site of the browser.
I used a module for that website software to create backgrounds and it can implement them in css as well but i dont know the id of it so i cant modify it with css. Thats the reason why i do it now by my own.
To get the question on a point again. If you have a 1920x1080 resolution screen and drag your windows bar to one of the sites, the background moves but it should stay static and just get cuttet on the right site than it works.
Related
I've made a prototype of my photography website and I want to convert it to HTML and CSS, the part I'm struggling with the most is the responsive part of the site. I have some images in it, which should adapt their size according to the screen size, and a sidebar menu, which should later convert to a sandwich menu.
I finished the prototype of the site and started to code, though I thought it would be a good idea to start making my web responsive from the beginning, so I won't need to change everything in the future.
Kind of new to coding and website building and have a company asking to make them a simple website. Well I cant just do something simple. Website link. Not my choice on using SS. So the banner image is set to default for the whole website. All I want to do is pick a couple of pages and override the image and keep the fixed position effect. Here is the code I am trying:
banner-image: url("https://static1.squarespace.com/static/5b8838fbe74940afd72fe383/t/5bd0af80f4e1fc41dabbc23c/1540403072779/Oil-Field.jpg") !important;
Any help would be great.
Check out my site here to see the issue across different size screens and on mobile.
I originally used the Luna theme in Bigcartel, having modified parts to make it bespoke to our brand. Whilst doing so the Luna responsive theme no longer worked... having not changed it one bit (Something in my actual code must have caused it to stop working)...;it would just show a blank white screen (mobile).
I then copied and used the responsive style of a separate theme, which causes my site to act like the normal site on a mobile etc... however the headers/footers are all out of place and mis-sized. I have tried changing all widths to %, but have failed to notice any differences. I had managed to change the size of the flexslider.. so that now it works but I am struggling to change the size of the other major components on the page (including navigation bar).
I am reluctant to post any code in here as of yet... as I'm not sure what to include (I dont want to include all the responsive styles), but perhaps someone could point me in the right direction?
Thanks,
First if all I apologize if I have posted this in the wrong place.
I am working on a website for a customer and am getting to the stage where it is almost ready to be released apart from a few minor tweaks.
I am using wordpress to develop the website - I have never used wordpress before so I am kind of learning as I am going along and I am glad the customer understands that.
The problem I am having is related to the header image. I have uploaded a header image by going into Appearance->Header and picked an image that is stored on my hard disk.
The header looks really good on my PC however when I open the website on my phone the header image doesn't get scaled down and the writing on the banner (located on the left) just disappears so all you see is half of the header banner which doesn't look very good.
I am using Mantra as the theme and the responsiveness works fine on my phone but the header image is never re-sized.
I have spend some time on here trying other people's suggestions and the most common solution is found here: Link however I am not sure to which CSS file to add the code.
I would appreciate if somebody out there could point me in the right direction so that I can overcome this issue.
Try having the height of the image: height:100%; It may make it look a little stretched. Or you could make the image height taller and if its a background image the it will cut off what you need
Responsive use in header .. try this in your CSS
.header {
background-size: 50%, auto
}
change 50% with yours
edit :
use image as background-image
I'm designing a chat page for a radio station and i am working on a 1360X768 Res' on a 32Inch screen.
When i ask friends to check the page layout it gets messy for them or elements get smaller in screen and the page wont stay consistent.
If its possible i would like to know if there is a fixed settings i need to insert to "body" in CSS so things like that wont happen, and when i move an element in my screen it will stay like that with other resolutions/screens.
The web page in question
Warning: There is music on Auto play in the page.
Also, if its ok to ask 2 different things but related.
I want to add the scrolling stats on the bottom to the bottom player..right where it says "now playing".
But everything i try wont make it go on top of it..z-index wont help.
Any thoughts?
The first mistake you're making is you're designing on a particular
resolution.
The second mistake you're making is that the resolution
you're designing on is way above the most commonly used 1024x768.
Take a look at MediaQueries. They allow you to build a fluid website that changes drastically at given resolutions.