Hi I would like my background image to wrap up the content/text inside it. The text seems to overflow from the background image and overlaps other text. It all works well on desktop but when I try to open Codepen in my iPhone, it didnt turn out as how it is expected to be. Please refer to pictures I attach here.
`https://codepen.io/sharonloh/full/pBrdRd`
I am new to coding and I have tried various ways after trying to search for solution but nothing seems to work.
Text overflowing from background image
From the picture you posted, there are various potential resolutions.
The first potential issue is that you have set a background image but not set other background attributes.
One way to resolve your issue would be to add a repeat to your css:
background-image: (your image);
background-repeat: repeat;
Add this to your css for the image/background class. If you only want the image to repeat vertically, you can use repeat-y instead of repeat. Similar for horizontal/repeat-x. Another way would be to use background-size:cover.
If you only want it to repeat on smaller screens you can add a media-query and add the extra attribute there.
Do add your css/html in future (now would be preferable! You can edit your question to add code). It helps to give a clearer picture of how to resolve the problem.
Hope this helps
Related
I have this grid here:
what i want to have (image example)
When I hoverig one of them, all 4 parts should get hidden and the background image with the right color should appear.
How can I get this happen?
thx & best regards
For this you would have to use JavaScript, so what I am thinking is that you could create <div>'s for all the backgrounds and when you hover over one of them in JavaScript you could do the show hide to the ones you want.
And just for future note's you should include code and more details and check the web or try to solve it before you even ask on Stack Overflow.
I'm having a little problem with one of my background images in a div element. I'm using the following CSS:
.myBox
{
background-image:url('....');
background-repeat:no-repeat;
background-size:cover;
}
My background image is a picture with some people on it. Now, if I increase the width of my browser window, at a specific point, some of the people are cutted off (due to the automatic resize of the image with 'background-size:cover').
My question is: Is there any option (or jQuery plugin), to set a specific part on the background image that will be always visible on all window sizes and also fill the whole element?
There are a variety of solutions you could try; however, you might want to start with something simple like applying a background-position.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
Using the background image of the group of people as an example, you might set background-position: top so that their heads never get cut off. You can also set the vertical and horizontal position in pixel or percent units.
try boostrap3 img-responsive class
.img-responsive Makes an image responsive (will scale nicely to the
parent element)
http://www.w3schools.com/bootstrap/bootstrap_ref_css_images.asp
I'm trying to create a header for my website but I'm having a bit of difficulty as I'm new to HTML and CSS. I want to create a banner with the same font and background as shown below. They consist of a certain colour with a pattern overlay at 44% opacity, which I'm not sure how to do.
I originally uploaded the header as an image, but I was told it's bad to use large images on websites as it make it longer to load. So I tried creating it via code. If anybody could please help replicate the header below, I'd greatly appreciate it. Thanks.
Link to my current HTML & CSS Code via Fiddle
Link to Banner I want to replicate
Here you have your fiddle updated: FIDDLE
I've fixed a few things in the html like tags not closed (your headers) and now the "container" contains the banner propely.
So now you just have to add a background image with the pattern you want and (as you did) play with the opacity value of your text.
#container {
background-image:url(http://zimasolutions.com/Images/pattern.png);
repeat:repeat;
}
Use the repeat option for the background image so you just need a little image.
I uploaded temporally the image pattern.png I have used as an example. I took the sample for the image you linked. In a few hours I may delete that image.
Edited: IF you want the pattern image OVER the text insteed of under it may be more complicated. You could absolute position a container over the banner but in this case you may need to change the image opacity with an image editor (like photoshop).
I'm working on my first website and I've stumbled across a problem.
How do i make my main contentBox cover the subNav? Img Here
You can set the z-index property.
To get an image over another image:
Using CSS, absolutely position your image and set the top value to 0 for both images.
However, I am not sure you are asking the correct question as in your image, your content areas seem to be above the area you want them to be placed.
Also - are your web page areas all images?
I've already had a look through some posts and couldn't find what I was after. I'm designing something in PS at the moment and I can foresee an issue when it comes to coding the design into html+css.
Imagine my centre div, it's 960px. It's going to have a semi-transparent .png as a background. The design is “full width” so this div will be contained in a larger div, set to 100% width. This is all ok until I get to the background on this outer div. It's also going to have a .png running the full width of the page. Problem is: I don't want it running through the middle, as it will result in the middle have a double thickness to it, if that makes sense?!
Basically, I need a way to either run a div either side that is elastic, or someway of stopping the background from running across the centre 960px portion of the browser window.
I have NO idea how this can be achieved, apart from using JS to set widths, which I don’t really want to do.
Any ideas?
Ok, I’ve tried to get the basic issue here: http://jsfiddle.net/8Bznc/1/
You can just put a non-transparent background on the center div, so the other background doesn't show through.
See here: http://jsfiddle.net/9bnHD/
Apply the background-image only to the wrapping div.
Alternatively, if the center and sides need to have different images, give the center div a non-transparent background-color as well.
Also, you could fake it by using multiple background-images. Demo
Keep in mind this won't work in old versions of IE, but something as non-essential as background transparency can be excepted as graceful degradation.