So i have a background thats 2300px long.. yet when the more button is clicked and the page extends, the background stops at around 1400px.
Here is the site in question. http://morzi.com/constantine/index.php
This is very frustrating as everything was working perfect yesterday, i did some minor adjustments and everything went to hell and now im stumped.
i just want the background to continue all the way down the page
Thanks!
Have you tried to set the background image size property?
Something like
background-size:100% 100%;
Or have a similar solution to this one:
http://css-tricks.com/how-to-resizeable-background-image/
Hope this helps
I added the background to the HTML CSS and it seems to be working fine now.
Related
This is super, duper weird from my perspective.
I'm setting up a website where I have a banner. I set the background image using the background-image property.
My challenge is: when I have two images with same dimensions, it doesn't work when I load using own domain, but works on external domain.
MY CHALLENGE:
I have this banner on my page:
Background is set like this:
Now this is kinda weird, since the image actually works on this URL and instead I get a black background (no image):
If I use a different image from a third party URL that has exactly same dimensions:
And I replace this in the CSS:
Then everything is fine and the background works!
So my question is:
What on earth is going on? I obviously assume I've went crazy and need to go home and sleep since there must be something super obvious going on, but I need your help to tell me what's wrong with me.
The overlay effect hides your background image.
Kindly change the css
.overlay::after{
background: rgba(0,0,0,.5)
}
I hope this helps you
Basically, I want to display a screenshot of a website inside an iphone frame. And I also want this to be responsive.
I have a rough idea but wouldn't know the best way of positioning the image, I'd probably be using the 'overflow-y' css property and set it to scroll, and set the height, so that my long image will scroll inside the iphone frame, however my problem is getting the image to be the right size of the iphone. Is this some javascript witchcraft I'm yet to discover? thanks!
P.S. Don't say that 'this has been asked before and link this because none of the examples actually work so I can't understand it, and don't know if they're trying to achieve the same thing.
Would leave this as a comment, but not enough rep.
You should probably just try it out for yourself and then post your code if you're having any issues.
If you really have nowhere to start go to codepen and search for 'iphone'.
I have been working on a website for my job (Don't worry its not web design) and am having some problems. I only know a very tiny bit of HTML and this is what I came up with. They say that is perfectly fine, but the website will not auto size. Here is the code below. I appreciate all the help!
Here is the site,
http://www.stateofusing.org/
Add this to your background image:
style="width:100%; height:auto;"
This will make your backgorund to use 100% of the screen.
If you want everything reziable add this to your body tag.
can also add to css file if you have one
Hope it helps
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 know this is so basic ,its so basic that it hurts me to ask this question but the issue is starting to make my hair too fall out lol.
i'm making a liquid website so everything resizes,so far so good...my page has a couple of iframes ,they will resize just great in i.e using % for height and width but when it comes to firefox only the width will resize and not the height ,the frame ends up pushing over my tables and making the whole thing look wrong
does anyone have a fix/solution to this please.
thanks to everyone that tried to help ,it was a bit vauge i managed to solve it in the end simply by
putting the iframe i wanted inside a layer/div set the layer to absolute and size it in % and then add the iframe inside the layer worked a treat for all browsers.