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
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
I am currently working on a project that involves a background image that needs to be linked specifically to an element within a container div.
The link is: http://idearevolution.ca/clients/jab/
The challenge I am running into is that as I resize my screen the green circle doesn't stay behind the guy. I've run into issues with responsive background images having to work with elements within a contained area in the past, but I've never been happy with my solutions.
The last thing I tried was using Sass to run a loop, adding a media query to update the position every 10 - 20 pixels. I don't like this solution however because of the code bloat it generates.
I am wondering if anyone has run into this issue before and if so, how do you go about resolving it? I've tried a few things but I'm just not happy with any of the solutions.
Any help would be great.
Thanks,
Andrew
Semantics would fix this problem best.
The semantics of using an image is this:
If the Image does not add to the content and explanation of the site,
do not use the image.
So, in truth, this image looks like it should only be part of the design.
Therefore, use the CSS3 Feature of Multiple Backgrounds.
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
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.
I got my colleague's web page together with and the css files and many images. I need to apply part of it to my jsp page. I have to admit that I didn't have any experience in handling css. Currently I am using GIMP2 to edit those 1-pixel-width background images. It's really the pain in the neck. I have to guess the proper image size, crop it a bit, then view it in the jsp... Do you have a better way to edit those 1-pixel-width images? Thanks in advance.
You might want to look into using Firebug add on for Firefox. There you can tweak the height of the graphics while looking at the page (yes, you need some knowledge about the DOM, CSS and Firebug to fully get this, but it's worth learning). Once you're happy with it, you open up your image editor and crop the image to that height.