Jump to content
  • Announcements

    • boen_robot

      Guidelines and Netiquette   03/28/2017

      Posting Problems:   Having problems posting your topic? Read through this: To join, you agree to our terms and conditions and fill out and submit a registration form. An activation email will be sent to your email adress, so you'll need to verify your account. After that the account has to be validated by one of the moderators. This will mean that it can take up to a day to be activated. A couple of things to remember to ensure approval: Don't use an email address in one of those $2 four character .com domains eg. xyds.com. These will be deleted and the domain added to the banned list. Don't use an email address that is within a domain with a bad reputation for spam. A Google search is run on every email address and email domain. Don't sign up with an email address that doesn't exist, doesn't work or requires the sender to answer a quiz before their email can get to you. Put your country and or state and city in the signup form. Blank forms will go to the botton of the "to do" list. And make sure that your email address and your country match, saying you're from Alabama and using a .ru email address is not going to get you activated. After a membership is activated the first few posts will be monitored. Posting spam or unapproved topics described in the agreement results in an immediate ban. The email provider and the IP addresses associated with the account will be banned and all posts will be deleted. These strict measures have been deemed necessary to hinder spam. Sorry for any inconvenience this causes, but it's not liable to change. If, after reading this, you still can't post and don't understand why, contact one of the Moderators listed here.   Topic Guidelines   Including the following information can expedite an accurate response from board members: Must be a Specific Problem or Question related to web design and development Include Code in Question (wrap with   for small blocks of code and for longer blocks   ) Include Code Author Include Extra Notes/Modifications/Attempts Include web link to page/file when possible Content Guidelines   You may not post, upload, link to, or email any Content that contains, promotes, gives instruction about, or provides prohibited Content. Prohibited Content includes any Content that breaks any local, state, county, national or international law. Prohibited Content also includes: No direct or indirect advertising or websites, forums, products, services No hijacking of posts (do not post your question in someone elses) Content that infringes upon any rights [ex. MP3s and ROMs] (including, but not limited to, copyrights and trademarks) Abusive, threatening, defamatory, racist, or obscene Viruses or any other harmful computer software False Information or libel Spam, chain letters, or Pyramid schemes Gambling or Illicit drugs Terrorism Hacking or cheating for internet/online games Warez, Roms, CD-Keys, Cracks, Passwords, or Serial Numbers Pornography, nudity, or sexual material of any kind Excessive profanity Invasive of privacy or impersonation of any person/entity Hacking materials or information Posting Tips   There are more BBcodes than there are buttons for on the reply menu. To get the full list, click "BB Code Help" underneath the clickable smilie face menu. Use   for small snippets of code Use   for lengthy snippets of code Use   if your snippet is HTML (optional) Use   if your snippet is SQL (optional) Rules of Conduct   Be nice. There's no need for calling someone stupid if they ask an 'easy' question. Keep your avatars and signatures absolutely child friendly. We have a younger audience on this forum. Keep your language appropriate for the same reason above. Do not PM moderators for help on the forum. Post on the topic, or create a new one.   Spam:   Recently, as you have all without doubt noticed, we have had lots of spam and advertisement on the forum. Therefore, we'd like to alert you as to what to do when you have found any of the aforementioned annoying messages: it. Immediately. Give a clear reason, please, if the advertising is not evident. DO NOT POST! Report, let the post stay as is, and we will get to it, meanwhile if you continue to post as normal in the other threads, it won't be on the top so long. Refrain from PMing the member. This won't help at all, as they are most likely spambots anyway. Thank you.       Images in signatures:   After thinking of users on dial-up, we have decided to enforce the following rules regarding signatures. Please pay heed to them. Respecting these rules is respecting the members on this forum with dial-up. Signature rules: No animated images AT ALL. No matter the amount of animation. Maximum image widthxheight: 300x150 Maximum image (file) size: 15kb Use calm colors. Do not use highly contrasting images in your signature, as this can get really annoying when seeing several posts from one member in the same thread. The same prohibited content goes for images as for posts. Lastly, use common sense. No lengthy signatures please. Save us some scrolling. Thank you.       Links in signatures:   Please understand that w3schools.com only exists because of voluntary work and is barely supported by the advertising littered throughout the tutorials and the forum. So, please, stop advertising other sites. DO not post links that drive traffic away from the w3schools domain - especially to a site that offers similar if not identical information. Please help support the site by keeping individuals on it. Thank you. Here are some guidelines as to what you can put in your signature: w3schools links --> allowed w3.org links --> allowed browser links --> allowed html editor links --> allowed personal sites --> allowed tutorial sites competing with w3schools --> NOT allowed sites completely irrelevant to webprogramming and this forum --> NOT allowed   Thanks for understanding, and for taking the time to read this. ~W3Schools Modstaff~
newcoder1010

How to have a good background image

Recommended Posts

Hello,

I have a background image under the class buyer_form. On top of the image, I have two blocks. Would that be possible if you visit my page and provide me some styling recommendation of the background image? Currently, I am  displaying the entire image. I feel that Image can be improved by applying some styling. I am trying to improve the styling by keeping the same dimension. Simply asking for recommendation and css code to improve it.

 

Thanks.

Share this post


Link to post
Share on other sites
Ingolme    794

The best option would be to set the background size to "cover" rather than 100% 100%. You shouldn't ever change the aspect ratio of an image, it looks bad.

You can read about the possible background-size values here: https://www.w3schools.com/cssref/css3_pr_background-size.asp

Share this post


Link to post
Share on other sites

I changed to cover. It looks better. Thank you.

Now I mainly see the trees. House is truncated. I saw other options from the link you gave me. I am not sure how I can include the house and then truncate trees? Please advise.

Edited by newcoder1010

Share this post


Link to post
Share on other sites
dsonesuk    702

That would mean you will have to adjust the background image container height to give it same aspect ratio, otherwise you would have same distorted image you experienced using 100% 100%;

OR using graphics program, create same aspect ratio canvas, place image in it to fill total height, then stretch trees at sides to fill remaining space, the house will be normal, but trees depending on how good you are might be odd looking, but the main important house proportions will be OK!.

Share this post


Link to post
Share on other sites
Ingolme    794

You can adjust which part of the image shows up using background-position.

I find setting background-position: 0 100%; does a good job.

Share this post


Link to post
Share on other sites

    I have another image field. I tried to apply the similar css like you did above but it is not doing anything. I think it would be better if I could take middle section of the original image. So if the original image height is 500px I would like to keep from 50px to 400px that means top 100px and bottom 50px wont display. Please advise. 

<div class="views-field views-field-field-img">     
    <div class="field-content"><img typeof="foaf:Image" class="img-responsive" src="mountain.jpg" width="1350" height="550" alt=""></div>  </div>

 

CSS

.img-responsive {
    display: block;
    height: auto;
    /* max-width: 100%; */
    width: 100%;
    /* background-repeat: no-repeat; */
    background-size: cover;
    background-position: 0 100%;
}

 

Share this post


Link to post
Share on other sites
dsonesuk    702

You can't use a img element to have a background image, and you cannot use background properties on a img element, it is a void element, it does not have a closing element like a div element.

Share this post


Link to post
Share on other sites
dsonesuk    702

You can give field-content a max-height of 350px, with overflow: hidden; then set height of img to max-height: or height: of 500px and use negative top margin of 100px; IF that is what you mean?

Share this post


Link to post
Share on other sites

First of all I would like to thank you for helping me. 

Second, i dont even know exactly what I am trying to do. I have slideshow on this page. First image i got it from online and image does not look right. So, I have been playing around to make all images look better but I failed to do so. So, at this point I would ask for your recommendation. My page.

Share this post


Link to post
Share on other sites
dsonesuk    702

The best option would be choose the best proportional size of slideshow image that would suit you needs, then make all the images the same size, by using a image editor and expand/reduce proportionally  until the image until it fills that specific size canvas to all 4 edges, which will probably mean any part of the image extending beyond these edges will be lost. Like reducing a square image into a rectangular canvas, you will lose top and bottom edge of square as they will be clipped to fit the rectangle. 

Share this post


Link to post
Share on other sites

I will have to research and need to play around for that. I will let you know. For now, can you please help me with some css at least to make it somewhat better (mainly the first image)?

Share this post


Link to post
Share on other sites

I created 5 images using Paint. All images have same dimension: Width:1750px. Height:750px.

I can see the images in desktop just fine. As I am making the screen smaller, I see that height is getting smaller and smaller. Once I get to mobile screen sizes, height becomes around 350px for images. I did not give this height. Images dont look as good as desktop sizes. 

Yes, I can create 3 separate blocks. One for desktop, one for laptop, one for mobile. Each will have separate image dimension. This route requires a lot of work. 

Ideal solution would be to use one block responsive for all devices. Again, images are responsive but dont look as good as desktop. When I inspect, I see this css:

 
.img-responsive, .thumbnail > img, .thumbnail a > img, .carousel-inner > .item > img, .carousel-inner > .item > a > img {
 display: block;
 max-width: 100%;
 height: auto;
}

I can simply change the height to desired height for mobile and tablet but it does not look good. I thought it would be helpful if I could display proportionally like truncate 10% around the images. I am just lost. 

 

Thanks.

Share this post


Link to post
Share on other sites
dsonesuk    702

For it to be responsive width wise, and have a height of 350px, proportionality the device width would be approx 820px wide, that is not mobile that is more like tablet device size? These images are massive, not ideal for mobile.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×